JQuery mouseover and mouseleave dropdown menus

Question

Next, the menu is displayed:

<a href="#" id="cityclick">ONZE WAARDEN</a> <div id="citydrop"> <div class="dropbottom"> <div class="dropmid"> <ul> <li><a href="#">FAQ</a> </li> <li><a href="#">ITC</a> </li> <li><a href="#">CLUB</a> </li> <li><a href="#">CULTUUR</a> </li> <li><a href="#">ROBITICA</a> </li> </ul> </div> </div> </div> 

jQuery for looks like this:

 $("#citydrop").hide(); $("#cityclick").mouseover(function () { $("#citydrop").slideDown('slow'); }); $("#citydrop").mouseleave(function () { $("#citydrop").slideUp('slow'); }); 

Problem: I cannot figure out how to switch the "citydrop" submenu when the mouse leaves the "cityclick" but is not yet in the "citydrop".

I tried jsfiddle here

Answer 1

Use some html wrapper and then call the mouseleave event on it, for example: http://jsfiddle.net/9yEHV/11/

 $("#wrapper").mouseleave(function () { $("#citydrop").slideUp('slow'); }); 

And the wrapper:

 <div id="wrapper"> <a href="#" id="cityclick" >ONZE WAARDEN</a> <!-- rest of your code --> </div> 

Answer 2

Is this what you are trying to do?

HTML

 <ul> <li class="main-menu"> ONZE WAARDEN <ul class="sub-menu" style="display: none;"> <li><a href="#">FAQ</a></li> <li><a href="#">ITC</a></li> <li><a href="#">CLUB</a></li> <li><a href="#">CULTUUR</a></li> <li><a href="#">ROBITICA</a></li> </ul> </li> </ul> 

Javascript

 $('.main-menu').mouseenter(function(){ $(this).find('.sub-menu').slideDown(); }); $('.main-menu').mouseleave(function(){ $(this).find('.sub-menu').slideUp(); }); 

Answer 3

hover plugin includes both mouseenter and mouseleave, works fine for me

JavaScript:

 $(document).ready(function(){ $('.dropdown').hover( function(){ $(this).children('.dropdown-menu.pricing-drop').slideDown('fast'); }, function () { $(this).children('.dropdown-menu.pricing-drop').slideUp('fast'); }); }); 

Answer 4

  $(document).ready(function () { $('#Dropdown').mouseover(function () { $(this).slideDown(); }); }); $(document).ready(function () { $('#Dropdown').mouseleave(function () { $(this).slideup(); }); }); 

I think this may help.