Question

Sorry the title isn’t more specific. I have some minor problems with a jquery menu I coded. It can be seen on wlmtest.info

Its the main menu. The trouble I’m having is as follows.

If you hover over a menu button at the top, the menu drops down. Now move your mouse UPWARDS, do not hover over the actual drop down. The menu drop continues to display even though the mouse has left the menu.

The only way to get rid of the dropdown is to hover over the menu dropdown and then move your mouse off it.

My code is as follows

jQuery("ul.lmenutabs li").mouseenter(function() 
{
    jQuery("ul.lmenutabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery(".lmenutab_content").hide(); //Hide all tab content

    var activeTab = jQuery(this).find("a").attr("href"); //Find the href attribute     value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active ID content
    jQuery(".lmenutab_container").fadeIn()
    return false;
});

jQuery(".lmenutab_container").mouseleave(function() {
    jQuery(".lmenutab_content").hide(); //Hide all content
    jQuery(".lmenutab_container").hide(); //Hide all content
    jQuery("ul.lmenutabs li").removeClass("active");
    return false;
});

As you can see I have a mouseenter to get the drop down to display. And then a mouseleave so that when you hover over the dropdown and leave, the dropdown div is hidden.

How can I get it so that the dropdown is hidden when you leave the menu buttons at the top as well? Without the dropdown disappearing when you’re leaving the button to hover over the dropdown menu.

Sorry if this sounds confusing, I’ll try to explain again if you need me to.

Any help is much appreciated.

Answer 1

You are waiting for a mouseleave() event on the menu itself, but if the mouse never enters the menu, the mouse leave event is never triggered.

Add a mouseenter event on the header to hide the menu and a onClick() action on the page itself to make sure that the user can always get rid of your menu by clicking outside of it.