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

Question

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 submenu
        $('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.

Answer 1

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.