Question

I have the following script which handles the sliding down a submenu:

$('#nav li #bottom').hover(function() {
    $(this).closest('#nav li').find('#sub_nav').slideDown("slow");
},
function() {
    $(this).closest('#nav li').find('#sub_nav').slideUp("slow");
});

The script is written in this way so that the slidedown will only be triggered when the user hovers over one of the divs within the nav list items, i.e. #bottom.

The trouble I am having is that though the slide down works fine, the menu slides up when the user hovers over the submenu and, of course, I don’t want the submenu to slide up until the mouse/cursor leaves #nav li #bottom or #sub_nav.

I have created a jsfiddle here so that you can see the menu in action.

SCREENSHOT OF STRUCTURE OF NAV ITEM

Answer 1

you can wrap the #sub_nav by div#wrapper, this way sub_menu is a part of bottom:

<div id="bottom">
    <a href="#">Menu Item 1</a>
    <ul id="sub_nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>

also you can use stop() method:

$('#nav li #bottom').hover(function() {
    $(this).find('#sub_nav').stop().slideDown("slow");
},
function() {
    $(this).find('#sub_nav').stop().slideUp("slow");
});

DEMO