jQuery problème de menu déroulant :)

Question

Je travaille sur mon propre menu déroulant, voici le code affichant sous-menus cachés:

jQuery('ul li').hover(function(){ 
    jQuery(this).children('ul').stop().show().animate({ opacity: 1 }); 
}, function() { 
    jQuery(this).children('ul').stop().animate({ opacity: 0,}); 
}); 

Tout fonctionne très bien, mais les sous-menus sont en cours d'affichage non seulement lorsque l'utilisateur passe le parent-lien mais aussi quand survole la zone que les sous-menus invisibles prennent.

Je crois que le ul est caché, mais li est non, donc ('ul li'). Hover les déclenche. Comment éviter cela? C'est diabolique surtout avec des sous-menus à plusieurs niveaux.

Exemple: http://jsfiddle.net/6t523/ (essayez de passer le curseur sur le carré rouge).

[modifier]

Oh mon Dieu, je l'ai remarqué que rien ne se passe lorsque vous passez d'abord le carré rouge. Je ne cache pas les éléments mais je prends seulement l'opacité à 0 avec jQuery. Aaafffff! :)

La question est alors - comment les cacher élégamment? Mon code fonctionnera-t-il dans IE6/IE7/IE8?

Answer 1

Qu'en est-fading:

$('ul li').hover(function() { 
    $(this).children('ul').stop().fadeIn(); 
}, function() { 
    $(this).children('ul').stop().fadeOut(); 
}); 

démonstration en direct:http://jsfiddle.net/simevidas/6t523/2/

Answer 2

départ avec un style initial de 'display: none', puis avant de disparaître, vous pouvez .Show(), et après avoir disparu, vous pouvez masquer(). Alternativement, vous pouvez utiliser .fadeIn() et .fadeOut() qui font exactement cela pour vous.

Answer 3

Vous pouvez ajouter l'affichage: block; en stationnaire et affichage: aucun; autre. comme ceci:

jQuery('ul li').hover(function(){ 
    jQuery(this).children('ul').children('li').css('display','block') 
    jQuery(this).children('ul').stop().show().animate({ opacity: 1 }); 
}, function() { 
    jQuery(this).children('ul').stop().animate({ opacity: 0,},jQuery(this).children('ul').children('li').css('display','none')); 
});