Faking CSS transition height:auto

More info: http://stackoverflow.com/a/30531678/923745

HTML

<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Spacing.

CSS

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
    height:0;
      transition: height 1s ease;
    overflow: hidden
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;

}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
     height:auto;
    
}