Jquery - Sub Menu Is Hidden On Mouseout Of Main Menu

This seems like a pretty easy one, but I couldn't solve my issue by reading the related questions here on SO.. so here's mine. I have:

• Le

Solution 1:

The following assumes you have a second sub-menu to go with the "Numbers" main-menu item, something like I've shown here: http://jsfiddle.net/aY7wW/ - and further assumes that when you said "Restructuring the HTML is not an option" you meant that I couldn't even suggest adding attributes to associate each sub-menu with its main-menu item. To work within this restriction I've used the main-menu li element index to relate to the sub-menu ul element index (obviously this works only if the sub-menus are defined in the same order as the corresponding main-menu items). If you could add some id attributes or something it would simplify the code somewhat, but anyway:

var timerId,
    $mainMenuItems = $(".main-menu li"),
    $subMenus = $(".sub-menu");

$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.slideUp('fast');
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .slideDown('fast');
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).slideUp('fast');
    }
);

The basic idea is to use setTimeout() to delay hiding the sub-menu on mouseout from the main-menu. This gives you time to move the mouse over the sub-menu, and if you do the timeout is cleared so it won't be hidden. Then when you move the mouse off the sub-menu it is hidden. But allowing for movement of the mouse just between the different main-menu items, on initial hover we also clear any outstanding timeout and hide previously shown sub-menus so that only the correct sub-menu will show. I've used a delay of 500ms, but obviously you can set that to whatever feels natural for you.

Working demo: http://jsfiddle.net/aY7wW/

Solution 2:

Try putting both the main and sub menus in a div, and put the hover event on the div.

Solution 3:

How about something like:

$(".main-menu").mouseover(function () {
    $('.sub-menu').slideDown('fast').click(function (){
        $(this).slideUp('fast');
    });
});