下拉菜单在进入链接之前消失了

Question

Take a look at the tour link in the menu on this page . When I hover over tour, it's supposed to show the menu and let me choose which of the sub menus I wish to click on but it's disappearing too fast.

Here's the code of the menu:

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);

Anyone know why this is happening?

Answer 1

It seems as easy as this:

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

Or, for the retarded boss:

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

Answer 2

150 milliseconds is a quite short timeframe. Use a longer timeframe instead.

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

You may also want to keep it faded in while hovering on the sub menu... You need to change you selectors (reference the whole listitems instead of the link only).

Sample
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();

$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

Answer 3

Try

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

Answer 4

Instead of using onhover, you could try fading in on mouse over and fading out on mouse out. That might work better for your situation and give you more control over each separate event. Check out the example posted here .

Answer 5

If you keep your mouse pointer over the 'tour' link you'll see that it doesn't fade away. But when you move your mouse away from the a element it fades away, like it's supposed to.

If you use hover with the parent li element instead, it'll work for the whole container which includes both the 'tour' link and the sub menu you're fading in.