问题：
I am trying to make a <ul> slide down using CSS transitions.我正在尝试使用 CSS 转换使<ul>向下滑动。
The <ul> starts off at height: 0; <ul>从height: 0; . . On hover, the height is set to height:auto;悬停时，高度设置为height:auto; . . However, this is causing it to simply appear, not transition,然而，这导致它只是出现，而不是过渡，
If I do it from height: 40px;如果我从height: 40px; to height: auto;到height: auto; , then it will slide up to height: 0; , 然后它会向上滑动到height: 0; , and then suddenly jump to the correct height. ，然后突然跳到正确的高度。
How else could I do this without using JavaScript?如果不使用 JavaScript，我还能如何做到这一点？
#child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent40:hover #child40 { height: auto; } h1 { font-weight: bold; }The only difference between the two snippets of CSS is one has height: 0, the other height: 40. <hr> <div id="parent0"> <h1>Hover me (height: 0)</h1> <div id="child0">Some content <br>Some content <br>Some content <br>Some content <br>Some content <br>Some content <br> </div> </div> <hr> <div id="parent40"> <h1>Hover me (height: 40)</h1> <div id="child40">Some content <br>Some content <br>Some content <br>Some content <br>Some content <br>Some content <br> </div> </div>解决方案：
参考一： https://en.stackoom.com/question/EikP参考二： https://stackoom.com/question/EikP