html - 使嵌套列表元素在鼠标悬停时显示

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>

希望对你有帮助。