Menu show/hide using jquery

Question

Hello,

This is a css of a menu

<span id="menu2">Menu 2</span>

CSS for the above div

#menu2_submenu{
    position:absolute; left:375px; top:35px; background-color:#111; height:50px; width:160px; color:#424242;
}

sub menu

<div id="submenu">
                        <div id="submenu1">submenu1</div>
                        <div id="submenu2">submenu2</div>
</div>

and the jquery code that goes with the above

$('#menu2').mouseover(function(){
                $('#submenu').show();
                });



$('#submenu').mouseleave(function(){
                    $('#submenu').hide();
                    });

When the mouse is over menu2 $('#submenu').shows, and when the mouse leaves $('#submenu'), $('#submenu').hides. Now this is fine, the issue, is when the mouse leaves menu2 whether the mouse enters submenu or not #menu2 should hide.

I cannot use mouseleave on both #menu2 and #submenu, how do I do it.

Thanks Jean

Answer 1

Try to use a plugin, don't invent a bicycle: jQueryMenu

Answer 2

I'm not sure I understood your questions, but I'll let you know what I do generally in this kind of situation.

// First I block the event from bubbling up to the document
$("#menu2, #submenu").mouveover(function(ev) { ev.stopPropagation(); } 

// Then, when entering the #menu2, show the #submenu, but also install a listener
// for the rest of the document to hide the #submenu.
$("#menu2").mouseenter(function() {
  // Going back from submenu to menu should do nothing (make sure to not leave a gap)
  var submenu = $("#submenu:hidden");
  if (submenu.length > 0) {
    submenu.show(); // Only if it's hidden
    $(document).one("mouseover", function() {
      submenu.hide();
    });
  }
});