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?