jQuery 动画下拉 css 菜单 ul 显示 :block issue

Question

我正在尝试向 CSS 菜单添加简单的动画 http://jsfiddle.net/BGV2Z/2/

问题似乎是 display:block; .如果您第一次将鼠标悬停在菜单上工作正常，则在鼠标离开时，消失的菜单会再次出现在最左边的位置或顶部位置(取决于级别)。

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