我怎样才能让它在我将鼠标悬停在菜单项 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;
}
感谢您的想法。
非常感谢
保罗
最佳答案
我会组织子菜单 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>
关于html - 如何在悬停时显示子菜单容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65184723/