我正在运行此简单的“测试”代码，以通过在父<ul class="dropcontent">上使用：hover来更改嵌套列表<li class="drop">的背景颜色
.drop:hover .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a></li>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>请有人在这里说明问题所在。
最佳答案
.dropcontent是.drop的兄弟姐妹（不是后代），因此选择器.drop:hover .dropcontent不会将其作为目标。
要解决此问题，请将</li>的结束.drop移到</ul>的结束.dropcontent之后：
.drop:hover .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>或者将adjacent sibling combinator (
+)与选择器.drop:hover + .dropcontent结合使用：.drop:hover + .dropcontent {
background-color: yellow;
}<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Services</a></li>
<ul class="dropcontent">
<li><a href="#">serv1</a></li>
<li><a href="#">serv2</a></li>
<li><a href="#">serv3</a></li>
<li><a href="#">serv4</a></li>
<li><a href="#">serv5</a></li>
</ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</body>请注意，在选择子链接时，前者将应用悬停，而在选择
.drop本身时，后者将仅应用悬停。关于html - 为什么悬停无法使用嵌套在另一个列表下的列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57367258/