問題：
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