子菜单在主菜单元素悬停时显示内容答案

【问题标题】：Sub-menu displays content on hover over of main menu element子菜单在主菜单元素悬停时显示内容
【发布时间】：2019-05-22 05:29:50
【问题描述】：

我正在尝试学习为导航栏构建下拉菜单。我想要一个显示音乐的主要元素，然后是 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。

【问题讨论】：

标签： css drop-down-menu navigation

【解决方案1】：

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

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】：

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>

【讨论】：