CSS Dropdown menu with animation (no js) - css

Question

Trying to create an animated dropdown menu using CSS animation, without any JS. Thought I've been barking up the right tree but can't see where I'm going wrong, for this simplified menu item...
<div class="menu">Menu Item
<ul>
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li>Dropdown 4</li>
<li>Dropdown 5</li>
</ul>
</div>
And the following CSS;
.menu ul {
height: 0px;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.menu:hover ul {
height: auto;
}
Thought that should successfully result in a scroll down of the div, but it just keeps appearing. Any thoughts? Cheers

Answer 1

See this topic for reference: How can I transition height: 0; to height: auto; using CSS?
To put it simply, you can not animate to height: auto;. It is not supported. If you have a pre-determined, fixed height, you can do it by animating to that specific value. 0px to 100px for instance. Auto however is not supported.
The first answer in the link above links to another article in which a sort of work-around is given. You may explore that for implementation on your site.
Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

You can't use CSS transitions with height:auto, only with specific values.
.menu:hover ul {
height: 100px;
}
http://jsfiddle.net/mblase75/cWZMu/

Answer 3

The animation for a dropdown can be implemented with pure CSS:
ul {
overflow: hidden;
transition: all .3s ease;
}
ul.folded {
max-height: 0;
}
ul.unfolded {
max-height: 300px; //value of max-height should always bigger than actual sum of all li's height
}

Answer 4

I was able to build a solution similar to #artcher, but instead I used max-height: 100%; and that worked perfectly:
ul.submenu {
overflow: hidden;
transition: all .3s ease;
max-height: 0;
}
.top-level-item:hover {
.submenu {
max-height: 100%;
}
}