JQuery popup menu disappears when mouse

Question

I am trying to achieve the simplest Dropdown in the world using CSS and would like to spice it up a bit with jQuery. But the “hover” function in jQuery makes the dropdown menu disappear as soon as it leaves the trigger element (ul # menu li a), so you cannot select anything from the dropdown list.

Here you can see the code and related problem: http://jsfiddle.net/Xx2Z7/

I try everything and searched everywhere on the net, only to find out that many others got this problem, but none of the solutions work for me, and I'm looking for the simplest and most understandable code.

Thanks.

Answer 1

There he is:

jsFiddle

Basically, I changed your js events, now the animation is controlled only with the mouse and mouse element of your li. Li contains a submenu, so the submenu will remain visible even when you leave the area in which the link is located.

$(document).ready(function() { // Menus $('ul.menu').hide(); $('ul#main-nav li').mouseenter(function() { $('ul.menu', this).animate({opacity: 'show'}, 'slow'); }); $('ul#main-nav li').mouseleave(function() { $('ul.menu', this).animate({opacity: 'hide'}, 'fast'); }); });​ 

Answer 2

You were almost there. Since your submenus are children of li , you just need to determine that the mouse hovering over li instead of snapping (the mouse over li counts as mousing over li itself):

 $('ul#main-nav li').hover(function() { $(this).find('ul.menu').animate({ opacity: 'show' }, 'slow'); }, function() { $(this).find('ul.menu').animate({ opacity: 'hide' }, 'fast'); }); 

http://jsfiddle.net/Xx2Z7/3/

Answer 3

You started hovering on <a> , so when the mouse exits this <a> hide () trigger.

 $(document).ready(function() { // Menus $('ul.menu').hide(); $('ul#main-nav li').hover(function() { $(this).find('ul.menu').animate({opacity: 'show'}, 'slow'); }, function() { $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast'); }); $('ul.menu').mouseenter(function() { $(this).show(); }); $('ul.menu').mouseleave(function() { $(this).hide(); }); });