Jquery animate submenu on hover isn't smooth

I am developing a navigation bar with submenus. On page load, the bars load, and submenus are hidden. When you hover over a link, the submenu animates in. I prepared all of my code in a jsfiddel here: http://jsfiddle.net/6cAaN/

As you can see, it is working fair开发者_开发知识库ly well; however not perfectly. It is a bit buggy. Any ideas how I can sharpen up the following jquery to make the hover effect a bit smoother and better functioning?

Here is the jquery:

$("#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 help would be great!

One thing you can do to tighten the existing code as-is: There is a space beneath the <li> and above the dropdown <ul>. Where you have it set to "top" : "42px", it's creating a gap that doesn't have the hover event attached, so it makes the dropdown "shake" as it tries to hide/appear simultaneously.

Instead of setting the top property, just change it to padding-top in each instance. It makes it a lot smoother and more "hoverable".

http://jsfiddle.net/Madmartigan/6cAaN/8/

1. I would apply the padding to #menu-nav LI instead of #menu-nav This will increase the hover response area.

2. I would add z-index: -1 to the .sub-menu class so it doesn't appear on top of the menu bar.

3. I would change .sub-menu li to .sub-menu a and add display: block - this will make the whole sub menu button click-able instead of just the link.

As suggested by Yury, hoverIntent is a nice option for controlling mouse sensitivity and user error.

Just a few ideas.

Try to use hoverintent plugin instead of hover. http://cherne.net/brian/resources/jquery.hoverIntent.html