Jquery dropdown menu using toggle and hover() problem

So I am trying to create a drop down menu using .hover() and .toggle(). While Have managed to get the menu to appear when the user rolls over the link, it disappears when the user moves off the li开发者_JS百科nk to select an item from the menu. Is there a method or technique for keeping the menu toggled even when the user isn't still hovering over the link?

Here is the JS:

<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>

Put the menu element inside the link.

The solution can vary greatly depending on the HTML markup you're using. But a general solution to these kinds of things is to let the body element detect "mouseenters" and detect which element the event originated from. If it's not either #menu_link or #the_menu, then hide the menu.

$("body").mouseenter(function (e) {
   var eventParents = $(e.target()).parents();
   if (eventParents.index($("#menu_link")) == -1 &&
         eventParents.index($("#the_menu")) == -1) {
      $("#the_menu").hide();
   }
});

$("#menu_link").mouseenter(function () {
   $("#the_menu").show();
});

This gives you flexibility in, for example, placing the menu link in a different container div to the menu itself.