CSS Dropdown menu with animation (no js)

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?