jQuery Animating dropdown css menu ul display:block issue

Question

I am trying to add simple animation to css menu http://jsfiddle.net/BGV2Z/2/

The issue seems to be display:block; . If you hover first time menu works fine , on mouseleave the menu that disappeared appears again in far left position or in top position( depending on level ) .

    $("li").on('mouseenter', function () {

        $(this).find('ul').first().css('display', 'none').fadeIn(500, function () {

            $(this).css('display', 'block');

        });

    }).on('mouseleave', function () {

        $(this).find('ul').first().fadeOut(500, function () {

            $(this).css('display', 'none');

        });
    });

I am missing something obvious any help is appreciated. Thank you!

SW4 · Accepted Answer · 2014-02-25 15:15:43Z

2

Add position: relative; to your CSS for ul.dropdown li

ul.dropdown li {
    float: left;
    min-height: 1px;
    vertical-align: middle;
    margin:0 5px;
    display:block;
    position: relative;
}

answered Feb 25, 2014 at 15:15

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benn Over a year ago

Nice find ! Than you!

Patryk · Accepted Answer · 2014-02-25 15:26:18Z

1

You could do it without the need of jQuery and use CSS3 animations :)

Just add some transition animations, an example here: http://jsfiddle.net/xine/BGV2Z/13/

answered Feb 25, 2014 at 15:26

Patryk

6387 silver badges17 bronze badges

1 Comment

Benn Over a year ago

Nice one also , but I need bit more animations and also supporting browsers without css3 support. But thank you for the example

Collectives™ on Stack Overflow

jQuery Animating dropdown css menu ul display:block issue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related