下拉菜单悬停LI问题

Question

此代码用于下拉菜单，问题是当我将鼠标悬停在li上时，下拉列表打开正常，然后当我将鼠标移到新的下拉列表上时，li a的悬停属性被删除，我需要使用悬停属性的背景，直到鼠标远离li a或dropdown 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

这可以通过优秀的CSS来完成。不需要jQuery。

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

<强> jsFiddle

Answer 2

不使用.hover函数，而是使用与“a”元素关联的mouseenter函数来触发下拉列表。

然后使用与较高li元素相关联的mouseleave函数来隐藏下拉菜单。