css transition height: 0; to height: auto;

Question

I am trying to make a ul "slideDown" using css transitions,

the ul starts off at height:0;
On hover height is set as 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 "slideUp" to height:0; and then suddenly jump to the correct height.

How else could i do this?
My attempt

Answer 1

You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.