Question

我正在尝试学习为导航栏构建一个下拉菜单。我想要一个主要元素，上面写着“音乐”，然后是2个子菜单，分别是“歌曲”和“专辑”，然后我希望链接列表（歌曲，专辑）出现在悬停上。但是，当我将鼠标悬停在主要元素上时，我的元素的所有子内容也会显示，并且我想阻止这种情况的发生，直到将子菜单（专辑或歌曲）悬停了为止。

我尝试过在CSS中进行一些翻转，尝试了所有我能想到的组合。我以为我错过了什么。

HTML

nav ul ul li li {
  display: none;
  background-color: yellow;
}

nav ul ul:hover li li {
  display: block;
}

nav ul ul li {
  display: none;
  background-color: red;
}

nav ul {
  position: relative;
  background-color: pink;
}

nav ul :hover li {
  display: block;
}

<div class="wrapper">
  <nav>
    <ul>
      <li>Music
        <ul>
          <li>Songs
            <ul>
              <li><a href="#"> Blue slide park</a></li>
              <li>Albums
                <ul>
                  <li><a href="#">KIDS</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

****编辑*****

我已修复HTML，请仅关注CSS。

Answer 1

？

nav ul ul li li {
display: none;
background-color: yellow;
}

nav ul ul:hover li li {
display: block;
}

nav ul ul li {
display: none;
background-color: red;
}  

nav ul {
position: relative;
background-color: pink;
}

nav ul :hover li {
display: block;
}

nav ul li ul li ul{
  display:none;
}

nav ul li ul li:hover ul{
  display:block;
}

nav ul li ul li ul li .x2{
  display:none;
}

.x1:hover .x2{
  display:block;
}

<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
    <nav>
        <ul>
            <li>Music
                <ul>
                    <li>Songs
                        <ul>
                            <li><a 
href="#"> Blue slide park</li>
                    <li class="x1">Albums
                        <ul class="x2">
                            <li><a 
href="#">KIDS</li>
                        </ul>
                    </li>
                        </ul>
                    </li>
                </ul>
                </li>
        </ul>

    </nav>
</div>
</body>

Answer 2

您使用子组合器 >选择元素的直接子项。

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

<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
    <nav>
      <ul>
        <li>Music
          <ul>
          <li>Songs
            <ul>
              <li>Blue side parks</li>
              <li>Albums</li>
            </ul>
          </li>          
          </ul>
        </li>
      </ul>
    </nav>
</div>
</body>
</html>

子菜单将内容悬停在主菜单元素上

2 个答案: