jQuery drop-down menu issue :)

I'm working on my own drop-down menu, here's the code displaying hidden sub-menus:

jQuery('ul li').hover(function(){
  jQuery(开发者_运维百科this).children('ul').stop().show().animate({ opacity: 1 });
}, function() {
  jQuery(this).children('ul').stop().animate({ opacity: 0,});
});  

Everything works fine, but sub-menus are being displayed not only when user hovers parent-link but also when hovers area the invisible sub-menus take.

I believe the ul is hidden, but li's no, so ('ul li').hover triggers them. How to avoid that? That's evil especially with multileveled sub-menus.

Example: http://jsfiddle.net/6t523/ (try to hover the red square).

[edit]

Oh my God, I've noticed that nothing happens when you hover the red square at first. I'm not HIDING the items but only taking opacity to 0 with jQuery. Aaafffff! :)

The question is then - how to hide them elegantly? Will my code work in IE6/IE7/IE8?

---

How about fading:

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

Live demo: http://jsfiddle.net/simevidas/6t523/2/

---

start with an initial style of 'display:none', then before fading in, you can .show(), and after fading out you can .hide().

alternatively, you can use .fadeIn() and .fadeOut() which do exactly this for you.

---

You could add the display: block; on hover and display: none; else. like this:

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'));
});