我要升 2 级了 <nav>
进入 3 级并遇到一些困难。
第 3 级显示的位置和预测的一样,但是当“祖 parent ”悬停在上方时,而不是我想要显示的元素的父级。
我已经在 CSS 上胡思乱想了一段时间,但我无法让它按照我的意愿做出响应。
感谢任何帮助。
有一个 fiddle ,因为我的解释可能有些欠缺。
来自 fiddle 的代码:
#nav{
background: #bada55;
width: 99%;
margin-top:-5px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
height: 40px;
}
#nav ul li{
/*child elements positioned absolutley will be relative to this*/
position: relative;
border-top: 1px solid #e9e9e9;
float: left;
}
#nav a{
color: ghostwhite;
padding: 12px 0px;
/*fill hori space*/
display: block;
text-decoration: none;
/*apply transition to background property, taking 1s to change it
*/
transition:padding 1s, background 1s;
-moz-transition:padding 1s, background 1s;
-webkit-transition:padding 1s, background 1s;
-o-transition:padding 1s, background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
/*hover pseduo class*/
#nav a:hover{
/*
RGBA background for transparancy:
last number(0.05) is the transparency
*/
padding-left:35px;
background: RGBA(255,255,255,0.05);
color:#fff;
}
#nav ul li:hover ul{
/*diplay when hovered*/
display: block;
}
#nav ul ul{
position: absolute;
left: 0px;
top: 40px;
border-top: 1px solid #e9e9e9;
display: none;
/*width: 304px;*/
z-index: 1;
}
#nav ul ul li{
width: 150px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
/*float:left;*/
}
#nav ul ul li a{
color:#000000;
font-size:12px;
text-transform:none;
}
#nav ul ul li a:hover {
color:#929292;
}
/*3rd level...*/
#nav ul ul ul{
position: absolute;
left: 150px;
top: 0px;
border-top: 1px solid #e9e9e9;
display: none;
/*width: 304px;*/
z-index: 1;
}
#nav ul ul ul li{
width: 150px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
#nav ul ul ul li a{
color:#000000;
font-size:12px;
text-transform:none;
}
#nav ul ul ul li a:hover {
color:#929292;
}
#nav ul ul li:hover ul{
/*diplay when hovered*/
display: block;
}
<nav id = "nav">
<ul>
<li>
<a href="#">1.1</a>
<ul>
<li>
<a href="#">1.1.1</a>
<ul>
<li><a href="#">1.1.1.a</a></li>
<li><a href="#">1.1.1.b</a></li>
</ul>
</li>
<li><a href="#">1.1.2</a></li>
<li><a href="#">1.1.3</a></li>
</ul>
</li>
</ul>
最佳答案
改变
#nav ul li:hover ul {
/*diplay when hovered*/
display: block;
}
到
#nav ul li:hover>ul {
/*diplay when hovered*/
display: block;
}
注意多余的“>”
编辑: 已添加 jsFiddler
关于html - Level 3 <nav> 在该隐藏的时候没有隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17945878/