下拉菜单悬停 LI 问题

Question

这段代码用于下拉菜单，问题是当我将鼠标悬停在 li 上时，下拉列表打开正常，然后当我将鼠标移到新的下拉div 上时，li a 的悬停属性被删除，我需要 li a 背景来使用悬停属性，直到鼠标离开 li a 或下拉div。

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

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

<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

这可以通过好的 ol' CSS 来完成。不需要 jQuery。

.dropdown { display: none; }
.nav li:hover .dropdown { display: block; }

js小提琴

Answer 2

不要使用

.hover 函数，而是使用绑定到"a"元素的 mouseenter 函数来触发下拉列表。

然后使用绑定到较高 li 元素的 mouseleave 函数隐藏下拉菜单。