纯 CSS 下拉菜单 - 悬停在子菜单上时无法保持顶部 <li> 突出显示答案

【问题标题】：PURE CSS DROP DOWN MENU - Unable to keep top <li> highlighted when hovering over sub-menu纯 CSS 下拉菜单 - 悬停在子菜单上时无法保持顶部 <li> 突出显示
【发布时间】：2010-02-26 08:05:13
【问题描述】：

我有一个只有 CSS 而没有 JAVASCRIPT 的下拉菜单，当我将光标移到子菜单项上时，我遇到了保持顶部（主菜单项）突出显示的问题。您可以在这里查看菜单http://www.codedecks.com/cssnav.html。

如果您将鼠标悬停在“儿童”上并向下移动光标，则一旦您在“女孩”上方，顶部的“儿童”就会失去突出显示。

任何建议将不胜感激！提前致谢

【问题讨论】：

我的建议是不要重新发明这个特殊的轮子。这个问题有很多浏览器例外，你应该只使用吸盘鱼或类似的东西。这只是一场噩梦。

标签： css

【解决方案1】：

在您的 CSS 中将 #nav > li a:hover 更改为 #nav > li:hover a。

由于在悬停顶级li 时会显示隐藏的第二级ul，因此让顶级a 同时获得悬停样式是有意义的。当您将鼠标移到二级菜单链接上时，a 看起来仍然处于活动状态。 li:hover 适用于即使您将鼠标悬停在 li 的子元素上，即使它们的位置看起来像是在 li 的框之外。

【讨论】：

【解决方案2】：

对我来说，没有>：

#navigation li:hover a {
  background-color:#012A5E;
  color:#F1F1F1;
}

【讨论】：

【解决方案3】：

您当前在 A 标签上设置悬停状态，您需要（也）在 LI 标签上设置它。当您超过儿童 UL 时，您不再超过 A，但您仍然超过 LI。试试这个：

#nav li hover {
background-color:#F4F4F4;
color:#543056;

【讨论】：