Question

我正在尝试将简单动画添加到css菜单中 http://jsfiddle.net/BGV2Z/2/

问题似乎是显示：阻止; 。如果你悬停第一次菜单工作正常，在mouseleave上，消失的菜单会再次出现在最左侧位置或最高位置（取决于级别）。

    $("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');

        });
    });

我遗漏了一些显而易见的任何帮助。谢谢！

Answer 1

将position: relative;添加到ul.dropdown li

的CSS中

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

Answer 2

你可以在不需要jQuery的情况下完成它并使用CSS3动画：）

只需添加一些transition动画，例如：http://jsfiddle.net/xine/BGV2Z/13/

jQuery Animating下拉css菜单ul显示：阻塞问题

2 个答案: