Question

I set up a typical navbar, and when you hover over one element (“Our Teams”) a dropdown appears (using the jquery below):

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

When you then hover over the dropdown (#dropdown) the dropdown fades back out (because I hovered off the menu item) I need the jquery to work so it will allow for hovering over the dropdown, and will fade out after you hover off the dropdown AND the nav menu.

Any ideas? You can see a working example at http://pixelcakecreative.com/cimlife/

Answer 1

If you bind the mouseleave event to the #dropdown element the dropdown will remain until the user mouse-outs the dropdown:

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/kED9T/2/