我用这段代码得到了一个 css3 菜单:
HTML:
<div id="navi">
<ul>
<li><a href="#">First</a></li>
<li class="active"><a href="#">Second</a>
<ul class="child">
<li><a href="#">First child</a></li>
</ul>
</li>
<li><a href="#">Third</a></li>
</ul>
</div>
CSS:
#navi {
height: auto;
width: auto;
}
#navi ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi ul li {
float: left;
position: relative;
}
#navi ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#navi ul li a:hover {
background-color: #0C3;
}
#navi ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#navi ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
fiddle Here
现在我希望菜单不是水平的。它应该是垂直的。我试图删除 float:left;
但是子菜单没有显示。子菜单应该按下下面的所有菜单项。有什么建议么?会很棒。
最佳答案
如果你这样做,它会给它完美的外观,并将你的 nav
向下推三项。将此高度添加到您的特定类(class):
#navi ul li:hover ul {
height:32px;
}
但是,如果您在其他主 nav
项中有其他子菜单项,其中包含不同的项,那么您应该为所有特定元素创建类并根据它们赋予它们高度。看看这个:
#navi ul li:hover .class {
height:64px; /*for two items in sub menu and like this for other*/
}
关于html - 纯CSS子菜单垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19442618/