侧边栏的 CSS 会影响上方的菜单下拉菜单

Question

我们在一些页面上创建了一个特定的右侧边栏，其中包含列表中的元素。我为 ul(“sexsidebar”)分配了一个类并分配了 CSS 命令，以便 li 元素在悬停时会有不同的行为。

下面是侧边栏内容的 HTML 代码示例:

<ul class="sexsidebar">
<li><a href="/firstURL">Rape</a></li>
<li><a href="/secondURL">Indecent Assault</a></li>
<li><a href="/thirdURL">Child Pornography</a></li>
</ul>

然后是 CSS:

ul.sexsidebar li
     {background: #F5F5F5;
      margin: 5px;}

ul.sexsidebar li a
     {display: block;}

ul.sexsidebar li:hover, li:hover a
     {background: #57AC68;
      color: #FFFFFF !important;}

这确实奏效了。但由于某些未知原因，它影响了我们“所有”页面(也在 li 中)上层菜单的下拉菜单的外观。这一点我真的不明白，因为毕竟侧边栏被分配了一个特定的类 (ul class="sexsidebar")。所以很自然地，任何指向它的 CSS 命令都应该只影响那个类。但为什么上方的菜单下拉菜单会受到影响？

您可以查看示例页面 here .然而，我已经删除了侧边栏(带有性犯罪列表的部分)的 CSS 命令，因为它们弄乱了上方的菜单下拉菜单。当您将鼠标悬停在某些菜单上时，您会在页面上部看到带有绿色背景的菜单和下拉菜单。

希望有人能解释为什么对 class="sexsidebar" 的 CSS 命令会影响上层菜单下拉菜单。将不胜感激任何反馈。

Answer 1

看这个选择器的第二部分:

ul.sexsidebar li:hover, li:hover a

选择 li:hover a ，即整个页面上任何列表项中的每个链接。

改成这样:

ul.sexsidebar li:hover, ul.sexsidebar li:hover a