div hover не работает

Question

Я делаю панель навигации, но div hover с использованием JQuery не работает. Я не уверен, где я иду не так; HTML код:

<div  id="Navigation_left_0"><a href="">click This</a>
    <ul id="navScroll_0" sizset="true">
        <li><a href="">abcd</a></li>
        <li><a href="">abxfdcd</a></li>
        <li><a href="">afgvbcd</a></li>
        <li><a href="">asfrbcd</a></li>
    </ul>
</div>
<div  id="Navigation_left_1" ><a href="">click This</a>
    <ul id="navScroll_1" sizset="true">
        <li><a href="">abcd</a></li>
        <li><a href="">abxfdcd</a></li>
        <li><a href="">afgvbcd</a></li>
        <li><a href="">asfrbcd</a></li>
    </ul>
</div>

Код JQuery:

$(document).ready(function() {
    $('div[id^="Navigation_left"]').hover(

    function() {
        alert("Hello");
        var id = $(this).attr('id');
        var idStr = id.split('_');
        $(this).css('background-color', 'grey');
        var idNum = parseInt(idStr[2]);
        var ulID = "#navScroll_" + idNum;
        $(ulID).css({
            'display': 'block',
            'height': '3em',
            'float': 'left',
            'padding-right': '2px'
        });
    }, function() {
        var id = $(this).attr('id');
        var idStr = id.split('_');
        var idNum = parseInt(idStr[2]);
        $("#navScroll_" + idNum).css('display', 'none');
        $(this).css('background-color', 'red');
    });
});​

CSS часть:

ul{
  list-style-type:none;
  height:50px;
  display:none;
}
ul li {
    height: 3em;
    float:left;
    padding-right:2px;
    list-style-type:none;
    width:33%;
   }
div {
  background-color:red;
  float:left;
  width:"20%";
  height:"5%";
  padding-left:10px;
  padding-right:10px;
  position:relative;
}

Есть несколько div, но я поместил только часть кода, которая может помочь в понимании кода. Элемент управления не переходит в div hover, так как даже предупреждение не появляется. Еще одна вещь, которую я использую в документах - функциональность ajax, которая работает нормально. Упомянутый код jquery подключается после вызова ajax. Я проверил в IE8 и Chrome.

Answer 1

Из-за ul CSS это display:none; поэтому он ничего не отображает, а зависание не работает. Пожалуйста, удалите display:none; CSS от ul,

Answer 2

Ты прячешь ul список так удалить display:none; от ul css, а затем попробуйте

DEMO-1

так как вы прячете ul, так что нет содержимого под div для наведения, поэтому попробуйте добавить min-height:10px; разделить

ДЕМО-2