Question

I have a horizontal animated menu that has a strange behavior because it works fine only first time, after that the expandable menu is not animated and I don’t understand why the
ul#nav ul{display:none;} is not applied any more… this is jQuery function that I use for animation.

function mainMenu(){
$('ul#nav').find('> li').hover(function(){
        $(this).find('ul')
        .stop(true, true)
        .slideDown('slow');
    });
};

Answer 1

Maybe this will work:

function mainMenu(){
$('ul#nav').find('> li').hover(function(){
        $(this).find('ul')
        .stop(true, true)
        .slideDown('slow');
    }, function(){ $(this).find('ul').hide(); });
};

the problem is that the first time you have your <ul> hidden so it’s working just fine. After slideDown(), the <ul> becomes visible but when you move your mouse, you just change the left attribute, not the display. Basically, the <ul> is already visible so slideDown is not working.