使嵌套列表元素显示在鼠标悬停上

Question

我正在尝试制作一个可折叠/可扩展的导航栏菜单。我有合适的元素作为目标，但我无法让它在悬停时显示子菜单。

我想保持HTML的原样，如果可能的话，不使用任何类，我想学习在没有类的情况下这样做的基础知识，以更好地理解我在操作HTML元素时所做的事情。这样做的主要目的，只是为了在访问元素时感到舒适。

ul {
list-style: none;
}
ul li a {
color: white;
display: none;
}
ul li:hover a {
display: block;
background-color: red;
}
ul ul li {
background-color: pink;
color: white;
}
ul ul li:hover ul a {
display: block;
background-color: purple;
}

<nav>
<ul>
<li>Music</li>
<ul>
<li>Songs</li>
<ul>
<li><a href="#">Blue Slide Park</a></li>
<li><a href="#">What's The Use</a></li>
<li><a href="#">Hurt Feelings</a></li>
<li><a href="#">Fight The Feeling</a></li>
</ul>
<li>Albums</li>
<ul>
<li><a href="#">Blue Slide Park</a></li>
<li><a href="#">WMWTSO</a></li>
<li><a href="#">GO:OD AM</a></li>
<li><a href="#">The Devine Feminine</a></li>
<li><a href="#">Swimming</a></li>
</ul>
</ul>
<li>Videos</li>
<ul>
<li><a href="#">Objects</a></li>
<li><a href="#">Dang!</a></li>
<li><a href="#">Weekend</a></li>
<li><a href="#">Killin' Time</a></li>
<li><a href="#">My Favorite Part</a></li>
<li><a href="#">Best Day Ever</a></li>
</ul>
<li>About</li>
</ul>
</nav>

Answer 1

您的HTML标记结构错误。

此外，您应该只处理<ul>的显示，而不是像这样处理<a>：

nav > ul ul {
display: none;
}
nav > ul > li:hover > ul,
nav > ul > li > ul > li:hover > ul {
display: block;
}

<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li><a href="#">Blue Slide Park</a></li>
<li><a href="#">What's The Use</a></li>
<li><a href="#">Hurt Feelings</a></li>
<li><a href="#">Fight The Feeling</a></li>
</ul>
</li>
<li>Albums
<ul>
<li><a href="#">Blue Slide Park</a></li>
<li><a href="#">WMWTSO</a></li>
<li><a href="#">GO:OD AM</a></li>
<li><a href="#">The Devine Feminine</a></li>
<li><a href="#">Swimming</a></li>
</ul>
</li>
</ul>
</li>
<li>Videos
<ul>
<li><a href="#">Objects</a></li>
<li><a href="#">Dang!</a></li>
<li><a href="#">Weekend</a></li>
<li><a href="#">Killin' Time</a></li>
<li><a href="#">My Favorite Part</a></li>
<li><a href="#">Best Day Ever</a></li>
</ul>
</li>
<li>About</li>
</ul>
</nav>

希望这对你有帮助。