我尝试制作一个菜单,其中有 3 个菜单项和 1 个子项。如果我单击第二个元素,则应显示第一个子元素。但一般不显示。它应该为其设置动画并滑动。我认为有一种transition
的方法,但我不太了解CSS3。我想要一个纯CSS解决方案。
这是我的 HTML 代码:
<div id="menu">
<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>
我创建了这个 fiddle 。现在,如果单击第二个
菜单项,我想缓慢显示第一个子
菜单项。
我之前做的唯一一件事就是检查transition
,但我就是不明白。
有人可以给我提示吗?
干杯
最佳答案
查看您的 jsfiddle 已更新 http://jsfiddle.net/3kEg4/3/
#menu {
height: auto;
width: auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu 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;
}
#menu ul li a:hover {
background-color: #0C3;
}
#menu 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;
}
#menu 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;
}
关于html - 动画子菜单纯css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19437524/