一个针对子项和父项的解决方案在没有JavaScript的情况下也是可能的，当您添加一些内联元素时，这将触发悬停状态。

li>span:hover {
   background-color: lightgray;
   font-weight: bold;    
}

<ul>
    <li><span>fnord</span>
        <ul>
            <li><span>baz</span></li>
            <li><span>foo</span>
                <ul>
                    <li><span>baz</span></li>
                    <li><span>foo</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这里。

我相信你能用CSS得到的最接近的效果是从悬停元素的子元素中删除悬停样式......这对父元素没有帮助。

li:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

<ul>
    <li>fnord
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>gnarf
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JSFiddle
您找到的重复项上的公认答案是我见过的使用JavaScript完成此操作的最佳方法，使用e.stopPropagation：Cascading -hover effect using CSS。不过，您可能希望在选择器中使用比"all lists"更具体一些内容：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
JSFiddle的答案。

所以你只想直接针对李安？试试这个：

ul li ul li:hover{
    background-color: red;
}

Demo here

• • 编辑**

我还添加了另一个EXAMPLE，其中菜单确实可以继续扩展。

使用此选择器悬停

ul ul li:hover {}

• 它只能使用foo设置元素样式

在2023年，通过使用:has()和:not()伪选择器，纯CSS和不修改HTML就可以在Chrome浏览器上使用，但不幸的是，截至2023年1月，:has在Firefox中还没有完全支持（用户需要通过layout.css.has-selector.enabled标记选择加入，并且还有一些相关功能尚未实现）。

li:not(:has(li:hover)):hover {
  background-color: lightgray;
}

<ul>
  <li>fnord
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>foo</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>gnarf
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>yolo</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>