Jquery 如何在多级无序列表中定位顶级链接？

我有一个多级导航样式为无序列表，如下所示：

<ul id="nav-menu">
  ...
  <li id="menu-item-1">
    <a href="#">Category</a>
    <ul class="sub-menu">
      <li id="menu-item-2">
        <a href="#">Sub-Category</a>
      </li>
    </ul>
  </li>
  ...
</ul>

---

@泰勒，试着用Mouseenter，Mouseleave代替mouseover和mouseout，这样可以解决你的问题

---

要使主

在悬停次链接时保留样式，您需要将
：悬停
样式应用于
而不是其中的

JS

$("#nav-menu > li").hover(
    function(){ $(this).addClass("hover"); },
    function(){ $(this).removeClass("hover"); }
)

#nav-menu li:hover, #nav-menu li.hover {/* styles here */}

CSS

$("#nav-menu > li").hover(
    function(){ $(this).addClass("hover"); },
    function(){ $(this).removeClass("hover"); }
)

#nav-menu li:hover, #nav-menu li.hover {/* styles here */}

不要忘记中和导航菜单li：将
样式悬停在辅助元素上。您可以使用
#nav menu>li:hover
我想，但是浏览器支持没有那么强。
任何样式表示例都很好。（通常，如果孩子被悬停，父母也被视为“悬停”）@Nikita，添加了相关CSS@K在我未回答的问题上接受了最重要的答案，尽管它们实际上并没有解决我的问题。我的问题不是jquery事件，而是实际遍历列表。甚至比我想象的还要简单。谢谢，冠军。