I am currently developing my own drop-down menu and below is the code that shows 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 seems to be functioning correctly, but the issue arises when the sub-menus are displayed not just when the user hovers over the parent-link, but also when they hover over the area where the invisible sub-menus are located.
I suspect that while the ul is hidden, the li's are not, causing ('ul li').hover to trigger them. This becomes especially problematic with multi-leveled sub-menus.
For example, you can view a demo here: http://jsfiddle.net/6t523/ (try hovering over the red square).
[edit]
Upon further inspection, I realized that nothing happens initially when hovering over the red square. It appears that I am not actually hiding the items, but simply reducing their opacity to 0 using jQuery. Oops! :)
My main concern now is how to hide them more elegantly. Will this code work in older versions of IE such as IE6, IE7, or IE8?