jQuery .hover() is driving me crazy.

Question

I have a project that uses drop-down menus that are nested ul's, like so:

<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>

Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the submenu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.

I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the submenus at once.

Any solutions for me? Here's the relevant Javascript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).

$('.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() {
        $(this).children(".submenu").hide();
    });

This worked for me.

Answer 2

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

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

Answer 3

I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.