Menu Mouseenter Mouseleave Click

Anyone can help me? I want a dropdown menu with animation on mouseenter and mouseleave events but when clicked after mouse enter I want the submenu stay visible until new click any

Solution 1:

This could be significantly simplified using event delegation:

$('document').on("click",'#menu > li', function() {
    $('#menu > li').off('mouseenter mouseleave');
});

$('document').on("click",':not(#menu > li)', function() {
    $('#menu > li').on('mouseenter', function(){
         //your mouseenter handler goes here
    });
    $('#menu > li').on('mouseleave', function(){
         //your mouseleave handler goes here
    });
});

This is semantically equivalent to:

If a click happens on amenu item, unbind mouse enter/leave events

If a click happens on a non menu item, bind mouse enter/leave events