如何在悬停时显示子菜单容器答案

【问题标题】：how can I show the sub menu container on hover如何在悬停时显示子菜单容器
【发布时间】：2021-03-18 22:28:15
【问题描述】：

我怎样才能得到它，所以当我将鼠标悬停在菜单项 2 上时，它会显示子菜单容器？

我需要在 LI 或 A 标签上添加一些东西吗？我试过了

ul li a:hover .submenu-container {
    display: block;
}

但是没用

 <ul>
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li>
        <a href="#">Menu 2</a>
    </li>        

 </ul>
 <div class="submenu-container">
    <ul class="Sub-Menu">
           <h3>SubMenu 1</h3>
       <li>
           <a href="#">Sub-Menu 1</a>
       </li>
       <li>
           <a href="#">Sub-Menu 2</a>
       </li>        
    </ul>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

感谢您的想法。

非常感谢

保罗

【问题讨论】：

a:hover .submenu-container 这会选择 .submenu-container 类位于 a 元素内的元素，因此您需要将下拉菜单放在 a 标记中，以便在悬停时像这样修改它
那么我如何让我的子菜单容器显示？
首先，子菜单容器的 css 包含两个显示属性。
已解决，但感谢您指出这一点。

标签： html css nav submenu megamenu

【解决方案1】：

我会组织子菜单 div 在菜单 2 li 内并添加：

ul li:hover .submenu-container {
  display: block;
}

在此处查看完整的工作示例：

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    .submenu-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 50px 20px;
        background-color: red;
        display: none;
    }
ul li:hover .submenu-container {
  display: block;
}
    
    ul {
        list-style: none;
    }
    
    ul li {
        margin: 10px 0;
    }
    
    ul li a {
        text-decoration: none;
        display: block;
        font-size: 1.2rem;
    }

<div class=wrap>    

<ul>
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
          <div class="submenu-container">
        <ul class="Sub-Menu">
            <h3>SubMenu 1</h3>
        <li>
            <a href="#">Sub-Menu 1</a>
        </li>
        <li>
            <a href="#">Sub-Menu 2</a>
        </li>        
    </ul>
  </div>
        </li>        
    </ul>

  </div>

【讨论】：

【解决方案2】：

我已将您的 CSS 选择器更改为 ul li:hover .submenu-container 然后移动您的子菜单，使其位于带有悬停选择器的 li 内

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.submenu-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: red;
    display: none;
}

ul {
    list-style: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
}

ul li:hover .submenu-container {
    display: block;
}

<ul>
  <li>
    <a href="#">Menu 1</a>
  </li>
  <li>
    <a href="#">Menu 2</a>
    <div class="submenu-container">
      <ul class="Sub-Menu">
        <h3>SubMenu 1</h3>
        <li>
          <a href="#">Sub-Menu 1</a>
        </li>
        <li>
          <a href="#">Sub-Menu 2</a>
        </li>
      </ul>
    </div>
  </li>

</ul>

【讨论】：

这只是一种工作方式，当您尝试将鼠标悬停在其上时，您的子菜单会消失。请参阅我的答案以了解正确的方法。
谢谢，如果您不使用 + 符号，您的方法会起作用。使用 + 符号我无法进入我的子菜单，例如当我离开菜单 2 时它会消失
是的，我编辑了答案