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

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

1 个答案: