将鼠标悬停在下拉菜单中的子 <li> 上时删除父 <li> 的 CSS 格式答案

【问题标题】：remove CSS formating of parent <li> when hovering over child <li> in dropdown menu将鼠标悬停在下拉菜单中的子 <li> 上时删除父 <li> 的 CSS 格式
【发布时间】：2011-10-19 07:10:59
【问题描述】：

我在搞乱纯 CSS 下拉菜单，我注意到当您将鼠标悬停在顶部 <li> 元素上时，它会显示按钮样式，但是当您将鼠标悬停在下拉菜单中的子 <li> 元素上时菜单，顶部<li> 元素保留“按钮状态”。当我将鼠标悬停在下拉菜单中的任何项目上时，我希望父 <li> 元素的“按钮状态”消失。这是jsfiddle：

http://jsfiddle.net/AQZ4V/1/

【问题讨论】：

你不想要这个吗？它仍然向用户显示他/她所在的页面。为什么不将悬停状态更改为稍暗/更亮的颜色以在悬停时显示？
stackoverflow.com/questions/7815395/…

标签： html css drop-down-menu

【解决方案1】：

这适用于 chrome。 http://jsfiddle.net/jalbertbowdenii/bn9EC/

【讨论】：

【解决方案2】：

:hover 伪选择器适用于元素，即使子元素悬停。我可以建议您将“按钮样式”应用于顶部<li>s 中的<a> 元素。

#nav .current a, #nav li > a:hover {

而不是

#nav .current a, #nav li:hover > a {

jsFiddle Example

【讨论】：

为什么在“#nav li:hover > a”的情况下，即使我将鼠标悬停在子
元素上，父
仍被视为悬停？