在鼠标悬停在子项</li> <li>的下拉菜单中删除父<li>的CSS格式</li>

Question

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

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

Answer 1

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

Answer 2

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

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

而不是

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

jsFiddle Example