jquery.hover()把我逼疯了

我有一个项目使用嵌套的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 that.show()s the.submenu ul中。问题是,当光标移动到新的ul时,.navtab的.hover()-out会在子菜单中触发.hide(),尽管事实上我有li的高度,所以它会完全包围.submenu ul。

我已经尝试向.hide()添加延迟,但是如果您将光标快速地传递到navtab栏上,您将同时获得所有子菜单。

有什么解决办法吗?这是相关的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();
}