如何在悬停状态下显示子菜单容器
如何才能使其在我将鼠标悬停在菜单项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>
相关文章