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

Question

我怎样才能让它在我将鼠标悬停在菜单项 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;
}

感谢您的想法。

非常感谢

保罗

Answer 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>

Answer 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>

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

how can I show the sub menu container on hover

html

css

submenu

nav

megamenu