如何避免嵌套列表父项hover时影响子菜单链接样式？

问题出在你写的CSS选择器上：.filestab ul li:hover a会选中被hover的列表项下面所有层级的链接，包括子菜单里的，所以父项悬停时子菜单的链接也跟着变白了。

直接改两处CSS就能解决：

• 把控制悬停时链接变色的选择器，限定为只选当前列表项里直接包含的链接
• 重置子菜单里的链接在父项悬停时的颜色，恢复原本的蓝色

修改后的完整CSS代码：

.filesubmenu {
  display: block;
  position: absolute;
  width: 164px;
  top: 0;
  left: 0;
  background-color: #bdbebd;
  border-top: 1px #dedfde solid;
  border-right: 1px #000 solid;
  border-bottom: 1px #000 solid;
  border-left: 1px #dedfde solid;
  outline: 1px #fff outset;
  outline-offset: -2px;
}

.filestab ul li {
  display: block;
  padding-right: 16px;
  padding-left: 5px;
  width: calc(100% - 1px);
  height: 20px;
  text-align: left;
  font-family: "Arial";
  font-size: 12px;
}

.filestab ul li:hover {
  background-color: #00007b;
  color: #fff;
}

.filestab ul li a {
  color: #0000ff;
}

/* 只修改当前li下直接span里的链接颜色 */
.filestab ul li:hover > span > a {
  color: #fff;
}

/* 重置子菜单里的链接，父li hover时保持原本蓝色 */
.filestab ul li:hover ul li a {
  color: #0000ff;
}

.filepop1,
.filepop2 {
display: block;
position: absolute;
outline: white 1px outset;
outline-offset: -2px;
border-right: 1px #000 solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px #000 solid;
background-color: #bdbebd;
width: 164px;
left: calc(100% - 3px);
top: -1px;
}

HTML代码不需要修改，保持你原来的即可：

<div class="filestab">
  <ul class="filesubmenu">
    <li><span>I'm an example submenu!</span></li>
    <li><span>Example</span></li>
    <li><span><a href="">Example with link</a></span></li>
    <li><span>Example</span>
      <ul class="filepop1">
        <li><span><a href="">Example with link</a></span></li>
        <li><span><a href="#">Example with link</a></span></li>
        <li><span>Example</span>
          <ul class="filepop2">
            <li><span><a href="">Example with link</a></span></li>
            <li><span><a href="#">Example with link</a></span></li>
            <li><span>Example</span></li>
            <li><span>Example</span></li>
          </ul>
        </li>
        <li><span>Example</span></li>
      </ul>
    </li>
    <li><span>Example</span></li>
    <li><span>Example</span></li>
    <li><span>Example</span></li>
    <li><span>Example</span></li>
  </ul>
</div>
<!-- FILESTAB -->

这样修改后，当你悬停父列表项时，只有它自己的链接会变白，子菜单里的链接保持原本的蓝色，子菜单自己悬停时才会单独变色。

内容的提问来源于stack exchange，提问作者Luna