美好的一天，我正在尝试使用一些JS和CSS创建下拉菜单，但无法正常工作。这是小提琴链接：
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
我想做的是在显示隐藏的div时添加一些很酷的动画。顺便说一句，我只是从这个站点复制了过渡效果
有一个纯CSS解决方案。我纠正了你的榜样。确保您编写正确的HTML代码。这是新代码和小提琴：
HTML代码：
<ul class="custom-sidebar">
<li>
<a href="#" class="post-link">Accountancy</a>
</li>
<li>
<a href="#" class="post-link">Grade School</a>
<ul>
<li><a href="#" class="post-link">Goals and Objectives</a></li>
<li><a href="#" class="post-link">Clubs and Orgs</a></li>
<li><a href="#" class="post-link">Photo Gallery</a></li>
<li><a href="#" class="post-link">Summer Tutorial</a></li>
</ul>
</li>
</ul>
CSS代码：
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
通常最好避免使用不需要的JavaScript。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句