I have created a navigation bar with submenus. Initially, all the bars load with hidden submenus. Upon hovering over a link, the submenu animates in. You can check out my code on jsfiddle: http://jsfiddle.net/6cAaN/
The functionality is mostly working fine, but there are some bugs present. I'm looking for suggestions on how to enhance the jQuery code to make the hover effect smoother and more reliable.
Below is the jQuery code snippet:
$("#menu-nav ul:first").css({"opacity":"0"});
$("#menu-nav li").hover(function(){
$(this).find('ul:first').stop().show().animate({
"top" : "42px",
"opacity" : "1"
}, 300);
},function(){
$(this).find('ul:first').stop().animate({
"top" : "0",
"opacity" : "0"
});
});
Any assistance would be greatly appreciated!