[英]html / css dropdown menu not dropping
Simple question, i've got the following code but i dont know what to add to my css to lift the display:none; 一个简单的问题,我有以下代码,但我不知道要在CSS中添加什么以提升显示效果:无; If you need further explaining feel free to ask in the comments.
如果您需要进一步的解释,请随时在评论中提问。
<nav>
<ul>
<li>
<a href="[[~[[+id]]]]" title="[[+pagetitle]]">
[[+longtitle:default=`[[+pagetitle]]`]]
</a>
<ul>
<li>
<a href="#" title=lorem>
[[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
</a>
</li>
</ul>
</li>
</ul>
</nav>
/** Navigation **/
#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }
#nav ul li ul{
position: absolute;
left: 0px;
background: rgba(0,0,0,0.8);
border-radius: 0 0 5px 5px;
display: none;
z-index: 9000;
display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
display: block;
padding: 0;
overflow: hidden;
}
#nav ul li ul li a{
min-width: 100px;
margin: 0;
padding: 7px 14px;
color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }
nav li:hover > nav li ul li{
background-color:red;
overflow:visible;
}
nav li ul li{
display:none;
}
try this: 尝试这个:
nav ul li ul li{
display:none;
}
nav ul li:hover > ul li{
display:block;
}
I think what you are looking for is: 我认为您正在寻找的是:
nav ul li:hover > ul {
display: block;
}
Also, you don't have div with id #nav
, so all your styling is incorect, you should be using just nav
另外,您没有ID为
#nav
div,因此所有样式都不正确,您应该只使用nav
You were trying to hide the li
items in the sub-menu. 您试图隐藏子菜单中的
li
项目。 Instead hide the submenu ul
and then display it on hover. 而是隐藏子菜单
ul
,然后将其显示在悬停上。 For that change this 为此改变
nav li ul li{
display:none;
}
to 至
nav li ul{
display:none;
}
and add this 并添加此
nav li:hover > ul{
display:block;
}
Add the following rule: 添加以下规则:
nav li:hover, nav li:hover ul li{
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.