Debug CSS drop-down menu jQuery animation

[softishka]

I am trying to debug the following script to ensure the best, desired UX. While short and pretty, this script is not working quite as desired. \[code\] $("ul.menu li").mouseover(function() { $(this).find("ul.sub-menu").animate({"opacity": "show"}, 800, "swing"); $(this).hover(function() {}, function(){ $(this).find("ul.sub-menu").animate({"opacity": "hide"}, "slow"); }); });\[/code\]First off, it is not working initially; meaning after page load and then after hovering, in and then out, over each menu parent link item once, then and only then it starts working, as you can see from the fiddle demo. Can someone please explain why it is not initially working; and possibly provide how to edit my current script? Also, if the user accidentally hovers over multiple links then undesired animations get stuck playing for many seconds. I want to edit this responsiveness. What are currently some of the top ways to deal with this in the professional UI world when working with jQuery navigation effects and how can I implement these solutions into my script?