CODEWITHSUNDEEP
javascriptjquerycssmenu
RulerNature
RulerNature

Reputation: 753

Horizontal menu wont hide after first run

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');
    });
};

Upvotes: 2

Views: 273

Answers (1)

Marius Ilie
Marius Ilie

Reputation: 3323

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.

Upvotes: 3

Related Questions