CSS dropdown menu with animation (no js)

Question

Trying to create an animated dropdown using CSS animations without any JS. Thought that I was barking on the right tree, but did not see where I was mistaken 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 next 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; } 

A thought that should succeed in scrolling down a div, but it just keeps popping up. Any thoughts? Greetings

Answer 1

See this topic for reference: How can I go to height: 0; height: car; using CSS?

Simply put, you cannot animate height: auto; . It is not supported. If you have a predefined fixed height, you can do this by animating this value. From 0 to 100 pixels. Auto is not supported.

The first answer is in the link above the link to another article in which some work is given. You can study this for implementation on your site.

Can you use CSS3 to go from height: 0 to variable content heights?

Answer 2

You cannot use CSS transitions with height:auto , only with specific values.

 .menu:hover ul { height: 100px; } 

http://jsfiddle.net/mblase75/cWZMu/

Answer 3

Animation for the drop-down menu can be implemented using 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 height }