Css 多级导航菜单悬停问题

我的导航几乎完全按照我想要的方式工作。剩下的唯一问题是我在subnav上使用的这个小箭头图像，它表明它包含另一个级别的subnav。

ul#css3menu ul span {
    background-image: url("images/arrowsub.png");
    padding-right: 28px;
}
ul#css3menu ul span:hover {
    background-image: url("images/arrowsubhover.png");
    padding-right: 28px;
}

当您将箭头悬停在每个子AV上时，它会加载不同颜色的箭头图像，以与悬停时更改的背景色保持对比。
问题是，当您将鼠标悬停在下一个级别subnav上时，箭头将切换回，而背景颜色仍保持更改（应该如此）

为什么父li的背景色不会丢失其悬停规则，但箭头会丢失？

---

您可以通过此项查看行为和代码。看起来影响悬停时背景颜色的规则是

ul#css3菜单ul li:hover>a

由于

ul#css3menu ul li:hover

检测到悬停在

ul#css3menu ul

子菜单的任何

li

元素上，第二级子菜单也由

li

组成，当您将鼠标悬停在第二级

li

上时，第一级

li

的悬停状态将保持不变，因为原始规则仍然有效（因为当您将鼠标悬停在任何子级

li

上时，它处于活动状态，包括第二级

li

s）

---

当

ul#css3menu ul li:hover

为真时，CSS样式随后应用于直接子

a

（而不是应用于

li

s），以提供

ul#css3menu ul li:hover>a

的完整规则。这也让我困惑了一段时间，因为检测与样式的应用是分开进行的。希望这会有所帮助。

在您的情况下，最好在列表项的主容器上指定悬停状态，而不是仅针对菜单列表项中的特定元素。在您的情况下，将js小提琴上的第196行更改为

。子菜单li:hover span

。即使移动一个级别以访问子菜单项，默认情况下仍将鼠标悬停在父元素上

---

另外，在设计样式时不使用ID也是一种很好的做法。ID通常是为Javascript保留的

我无法使用

。子菜单

，但选择器的

li:hover span

部分给了我一个想法，我将第196行更改为

ul#css3菜单ul li:hover span

哦，天哪，这也解决了我在填充和边距方面遇到的问题。现在我可以消除那个代码了。好极了！很难说谁应该因为被接受的答案而得到认可。子菜单建议似乎不起作用（可能是我的错，没有正确地实现它），但是关于设置悬停的

li

而不是

span

的样式，您是正确的。它不起作用的原因是因为您在第192行中使用了一个ID来设置span的样式，并且ID将始终覆盖一个类。如果您将第192行更改为.ul span子菜单，则它将工作。我建议你阅读这篇文章，我想我可能会让你更加困惑。我做了我在codepen上谈论的更改。检查第192行以了解我刚才所说的更改。谢谢您的编辑。我以后会像那样给代码加空格我会跟着你的。这完全解释了为什么按钮即使在第二级悬停时仍保持悬停状态。哦，快！现在我明白了为什么这个解释也解释了为什么将第196行更改为

ul#css3menu ul li:hover span

解决了我的问题。我只是在悬停状态下设置

span

s的样式，所以我没有在第二级

li

中悬停

span

，所以我失去了我的箭头。现在我正在设置悬停的

li

的

span

的样式，因为我仍然悬停在

li

上，所以我没有丢失箭头。对吗？我希望如此。我想我开始掌握css的东西了！呜呼！