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>

希望这对您有所帮助。

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

1 个答案: