jQuery .hover () сводит меня с ума

Question

У меня есть проект, который использует выпадающие меню, которые являются вложенными ul, например:

<ul id="nav">
    <li id="thome" class="navtab">
    <a href="#" class="navlink lhome" id="nav_home" onclick="doCurrent('home');">HOME</a>
        <ul id="subnav_home" class="submenu">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">SMS</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Twitter</a></li>
        </ul>
    </li>
</ul>

Используя jQuery, я добавил .hover () к .navtab li, который .show () - это .submenu ul. Проблема в том, что когда курсор перемещается в новый ul, .hover () - для .navtab запускает .hide () в подменю, несмотря на то, что у меня есть высота li, чтобы он полностью переносился .submenu ul.

Я пытался добавить задержку в .hide (), но если вы быстро наведете курсор на панель навигации, вы получите все подменю одновременно.

Какие-нибудь решения для меня? Вот соответствующий Javascript. Функция hide () идентична .show () за исключением того, что она уменьшает высоту и скрывает ul (очевидно).

$('.navtab').hover(
        function(){
            tabShowSubnav($(this).attr('id'));
        },
        function(){
            tabHideSubnav($(this).attr('id'));
    });

function tabShowSubnav(menu){

    var sb = '#' + menu + ' > .submenu';
    var tb = '#' + menu;
    $('.navtab').each(function(){
        if (!$(this).hasClass('current_page')){
            $(tb).addClass('nav_hover');
        }
    });
    $(tb).css('height','239px');    
    $(sb).show();
}

Answer 1

    $('.navtab').hover(
        function() {
                    $(this).children(".submenu").show().children('current_page').addClass("nav_hover");
        },
        function() {
        });

    $(".submenu").mouseout(function(){
        $(this).hide();
    });

Answer 2

Мне наконец-то пришлось воспользоваться плагином jQuery hoverIntent, который игнорирует дочерние элементы с целью наведения мышки.

Answer 3

    $('.navtab').hover(
    function() {
        $(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
    },
    function() {
        $(this).children(".submenu").hide();
    });

Это сработало для меня.