How can I transition height: 0; to height: auto; using CSS? I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height. How else could I do this without using JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease;