trying create animated dropdown menu using css animation, without js. thought i've been barking right tree can't see i'm going wrong, 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 following css;
.menu ul { height: 0px; overflow: hidden; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .menu:hover ul { height: auto; } thought should result in scroll down of div, keeps appearing. thoughts? cheers
see topic reference: how can transition height: 0; height: auto; using css?
to put simply, can not animate height: auto;. not supported. if have pre-determined, fixed height, can animating specific value. 0px 100px instance. auto not supported.
the first answer in link above links article in sort of work-around given. may explore implementation on site.
can use css3 transition height:0 variable height of content?
Comments
Post a Comment