jQuery slideDown menu on .hover doesn't work until 2nd hover

The following code works successfully, except the menu slideDown only works on the second hover over my menu item. The first time it appears instantly, like no jQuery is applied at all the first time around.

$(document).ready( function() {

// animate dropdown menus
$('#wp-admin-bar ul li').hover(
    function () {
        //show submen开发者_StackOverflowu
        $('ul', this).slideDown(180);
    }, 
    function () {
        //hide submenu
        $('ul', this).slideUp(180);
    }
);

});

The weird thing is if I add

$(this).addClass("hover");

The class is added immediately - on the the first hover.

I'm a little baffled by this.

Ok where does: $(this).addClass("hover"); come into the equation? Because it sounds like what is happening is that the first mouseIn is showing the div via CSS and then its ok from ther eon out with the jQuery code. Animations that hide and show dont work unless display is set with the style attribute of the element.

I also couldn't find anything on google for this problem I thought would be common, I guess a lot of people are using display or visibility changes on their dropdowns instead of the superior left/right offseting (compatiblity wise).

Anyway here is a more elegant solution which will result in all sub menus working first time around too. No need to change any of your existing code (like adding display:block).

$("#nav li").hover(
function() {
    $("ul", this).slideUp(0).slideDown(180);
},
function() {
    $("ul", this).slideUp(180);
}

);

What this is saying: - Select all li elements - On an li hover, quickly SlideUp any child ul element, THEN slide it down at human animation speed - On mouseout SlideUp at human animation speed