如何在悬停状态下显示子菜单容器 [英] how can I show the sub menu container on hover

问题描述

如何才能使其在我将鼠标悬停在菜单项2上时会显示子菜单容器？

Codepen

我是否需要在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;
}

感谢您的想法。

非常感谢

保罗

推荐答案

我将进行组织，使子菜单div位于菜单2内li并添加：

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

    * {
        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>

这篇关于如何在悬停状态下显示子菜单容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！