jQuery animated menu#hover function()

I have a horizontal menu, which is animated by JQuery:

http://jsfiddle.net/BTD2F/5/

The problem(s): I a have a 'current' parent item, its ul shall be shown. If I hover another parent item, the ul 开发者_如何学Gowhich is currently shown, shall be hidden. That one form the hoverd item shall be shown and fade out if the hover() is 'finsihed'. All that does not work, like it should. You can see the code on jsfiddler. Please try to hover 'Moda' and you'll see the problem.

Many Thanks in advance, Lars

       jQuery("#headnav_primary .top-item").hover(

     function(){

        jQuery('.current-menu-item ul').hide('fast');
         jQuery(this).find('ul').show('slow');

        },    
       function() {
        jQuery(this).find('ul').hide('fast');
           });

Add class 'top-item' to your header li links.

Depending on which browsers you need this to work in, there are a couple of approaches to getting the sub-menus to appear.

You could change the JavaScript jQuery code to the following, which will simply hide all the subMenus when any <li> is entered and display the current <li>'s sub-menu.

var subMenus = $("#headnav_primary li ul");

$("#headnav_primary li").mouseenter(function() {
    subMenus.hide();
    $(this).children('ul').show('slow');
}).mouseleave(function() {
    subMenus.hide('fast');
});

Or remove all the JavaScript completely and just add this one simple CSS rule which displays the sub-menu when the parent <li> is hovered.

#headnav_primary li:hover ul {
    display:block !important;
}

Note: This will not work in older browsers, especially IE6. Also, I have added !important is because you have currently inlined style="display:none" on the sub-menus which is taking precedence. If you remove the inline style you could remove the !important.

Edit: Here is a better demo that only uses CSS. This will not work in IE6 because it only supports :hover on anchor tags. If you need IE6 support, I can update, but that will use jQuery.