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>

将鼠标悬停在“关于”菜单上后，将显示“历史记录”，“任务”和“视觉”的下拉列表。当我将鼠标悬停在其他菜单上时，将不会显示下拉菜单

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>

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

1 个答案: