html - 悬停在菜单上显示每个菜单中的下拉菜单列表

Question

我是 Web 开发的初学者，当我将鼠标悬停在我的菜单列表上时，下拉菜单会继续显示在每个菜单中。似乎是什么问题？

我尝试删除，所以我可以直接在css中使用“ul li ul li”，但它不起作用，当我尝试“.site-header nav ul li:hover .sub-menu-about”时也没有输出但是“.site-header nav ul:hover .sub-menu-about” 即使我使用“.site-header ul:hover .sub-menu-about”，我也遇到了同样的问题。

这是我的 CSS 代码

.sub-menu-about{
display: none;
}

.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}

.main-navigation ul:hover .sub-menu-about ul{
display: block;
margin: 10px;
}

这是我的html代码

  <div class="site-header__menu group">
    <nav class="main-navigation">
      <ul>
       <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
          <div class="sub-menu-about">
            <ul>
              <li><a href="#">History</li>
              <li><a href="#">Vision</li>  
              <li><a href="#">Mission</li>
            </ul>
          </div>
        <li><a href="#">News</a></li>
        <li><a href="#">Events</a></li> 
      </ul>
    </nav>
   </div>

一旦我将鼠标悬停在关于菜单上，就会显示历史、使命、愿景的下拉列表。当我将鼠标悬停在不同的菜单上时，将不会显示下拉菜单

标签： htmlcss

Answer 1

错误 1：子菜单应位于<li>标签内。已更正

错误 2：首先，您.sub-menu-about通过隐藏类displays: none，然后尝试不显示该类本身，而是显示其中的一个列表。已更正

结果

.sub-menu-about {
  display: none;
}

.site-header ul:hover .sub-menu-about {
  display: block;
  margin-top: 15px;
  margin-left: -15px;
  position: absolute;
}

.main-navigation li:hover .sub-menu-about {
  display: block;
  margin: 10px;
}

<div class="site-header__menu group">
  <nav class="main-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <div class="sub-menu-about">
          <ul>
            <li><a href="#">History</li>
                        <li><a href="#">Vision</li>
                        <li><a href="#">Mission</li>
                    </ul>
                </div>
            </li>
            <li><a href="#">News</a></li>
            <li><a href="#">Events</a></li>
          </ul>
  </nav>
  </div>