Question

我有下面的代码片段，它显示我的下拉菜单确定但是我似乎无法让下拉停止那里直到鼠标离开ul.nav li a所选的鼠标离开打开下拉框，有什么建议吗？

$("ul.nav li a").on({
    mouseenter: function () {
            $(this).parent().find('.dropdown').show();
    },
    mouseleave: function () {
            $(this).parent().find('.dropdown').hide();
    }
});

这是我正在使用的菜单代码。

    <ul class="nav">
            <li class="first"><a href="/">HOME</a></li>
            <li>
                    <a href="#">CATEGORIES</a>
                    <div class="dropdown" style="display: none">test</div>
            </li>
    </ul>

Answer 1

你真的不需要为此使用jQuery，你可以使用纯CSS：

ul.nav li div.dropdown {
    display: none;
}

ul.nav li:hover div.dropdown {
    display: block;
}

JSFiddle demo

只需确保从标记中的style中删除div属性。

我们不是检测:hover元素上的a，而是在包含li元素上检测到它。当用户将鼠标悬停在li元素上时，其中的div.dropdown元素将设置为display: block。

Answer 2

您可以将hover事件与进/出处理程序和toggle一起使用，并定位LI而不是anchor：

jsFiddle

$("ul.nav li").hover(function(){
    $(this).find('.dropdown').toggle();
});

或者使用CSS ...

保持下拉菜单，直到导航离开

2 个答案: