Jquery 一个好看的导航菜单，只剩下一个任务

我已经设计了一个漂亮的菜单，需要帮助添加一个功能。我的问题是，当将鼠标悬停在子菜单上时，我希望集合悬停状态保持不变

HTML

---

解决方案非常简单。只要有：hover，就用li:hover>a替换它。之所以需要这样做，是因为每当您将鼠标悬停在嵌套列表项上时，您会自动将鼠标悬停在其列表项祖先上，这将自动使祖先也悬停，从而在其上调用：hover状态

顺便说一句，在我的书《功能CSS》（Functional CSS）中，我构建了一个复杂的导航菜单，根据浏览器空间的不同显示不同。你的菜单看起来不错，但有些元素仍然需要调整

这是小提琴：

---

您所需要的只是使用CSS以稍微不同的方式定位元素

当前，您通过如下方式针对每个菜单锚悬停状态来装饰菜单：

 .menu a:hover {
       /* menu item styles here */
}

.menu li > ul > li:hover > a

因此，当用户将鼠标悬停在父链接上时，要访问菜单项，他们会立即将鼠标移出父链接。您需要将

：hover

状态应用于包含整个菜单项及其子项的父元素。在这种情况下，

.menu li

因此，我们不影响所有子元素（即其中的嵌套列表），您可以使用选择器

>

.menu > li:hover > a {
    /* menu styles here*/
}

在此，它再次以主菜单项中的嵌套列表项为目标：

.menu ul.children > li:hover > a {
     /* nested menu item styles */
}

或者，您也可以针对相同的项目，如下所示：

 .menu a:hover {
       /* menu item styles here */
}

.menu li > ul > li:hover > a

---

这是一份漂亮的菜单！你能再澄清一点吗？我不太明白。当有人在其子元素上悬停时，您希望“集合”保持黑色样式吗？

.menu li > ul > li:hover > a