悬停显示多个兄弟
悬停显示多个兄弟
提问于 2012-09-10 22:28:39
我正在尝试创建一个简单的下拉菜单，它隐藏了子菜单锚点，直到主菜单锚被悬停。
html标记
<ul>
<li><a href=".">1</a></li>
<li><a href=".">2</a></li>
<li>
<a href=".">3</a>
<a href=".">3.1</a>
<a href=".">3.2</a>
</li>
</ul>css样式
<style>
ul li a:nth-child(n+2){
display:none;
}
ul li a:nth-child(n+2):hover{
display:block;
}
ul li a:hover + a:nth-child(n+2) {
display: block;
}
</style>目前，这只显示子菜单(3.1)的第一个锚，当我需要它能够显示子菜单3.2.3.n的所有其他锚点时，如何实现这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-10 23:04:32
你应该用这个：
HTML：
<ul id="container">
<li><a href=".">1</a></li>
<li><a href=".">2</a></li>
<li><a href=".">3</a>
<ul>
<li><a href=".">3.1</a></li>
<li><a href=".">3.2</a></li>
</ul>
</li>
</ul>CSS：
#container>li>ul{
display:none;
}
#container>li:hover>ul{
display:block;
}Demo：http://jsfiddle.net/Tx4z7/
您还可以在子菜单中添加一个填充：
#container>li>ul{
padding-left:20px;
}Demo：http://jsfiddle.net/Tx4z7/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12360315
复制相关文章
相似问题
腾讯云开发者
