Question

I have the following code:

$("#submenuSolutions").mouseleave(function () {
        $(".submenuRightCurrent").hide();
        $(".submenuRightCurrent").removeClass("submenuRightCurrent");
        $("#prasentRight").addClass("submenuRightCurrent");
        $("#prasentRight").addClass("submenuRightCurrent").stop(true,true).show();
        $(".menuHover").removeClass("menuHover");
        $(this).stop(true,true).hide(); 
    });

This code is for a drop down submenu and works very good and hide the submenu I want. The problem is when the user hover the main link #menuSolutions aand the drop down appears but he don’t hover the drop down instead of this he continues to hover the other links of the main menu the drop down doesn’t disappear, only if he hover it a moment and then leave it.

How can I make the above code to work both for #submenuSolutions AND #menuSolutions a:hover when none of them is hovered?

Answer 1

Just trigger the event programatically like so:

$('#submenuSolutions').triggerHandler('mouseleave');

Call this from any of the main menu items mouseenter handlers.