Question

I have a simple drop-down menu that is controlled using the following script:

$(document).ready(function () {
    $('img.menu_class').hover(function () {
    $('.the_menu').slideToggle('medium');
    });
});

I can’t work out how to continue to display the div that is revealed, i.e. “.the_menu”, when the mouse leaves the ‘img.menu_class’ div but stays in the “.the_menu” div. It needs to be preserved whilst the mouse is in either of these divs.

You can see the menu in its current state here. Just hover on the main nav bar (it’s just an image at the moment) to see the drop-down menu.

Could someone help with this?

Thanks,

Nick

Answer 1

Instead of hover() you can switch to mouseenter() and mouseleave() and change the markup a bit.

Example:

HTML:

<div class="menu_class">
  <img src="http://salliannputman.com/images/nav.png">
  <div class="submenu" style="display: none">
    <img src="http://salliannputman.com/images/nav3.png" />
  </div>     
</div>

JS:

$('img.menu_class').mouseenter(function() {
  $('img.submenu').slideDown('medium');
});
$('img.menu_class').mouseleave(function() {
  $('img.submenu').slideUp('medium');
});

HERE is the working code.