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

possible duplicate of [CSS transition height: 0; to height: auto;](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) — Blazemonger, May 07 '13 at 14:39

score 11 · Accepted Answer · edited May 23 '17 at 12:18

11

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?

edited May 23 '17 at 12:18

Community

1
1

answered May 07 '13 at 14:38

Michael

7,016
2
28
41

Ah didn't realise that, want to steer away from js to reduce the sort of shuddering effect you get on old computers and mobile devices. Guess I'll probably stick to transforming to a pre-calculated height, which to be fair shouldn't be hard to calculate given each li have a fixed height. Cheers for that! – raininglemons May 07 '13 at 14:44
Not hard at all, and certainly an adequate thing to do. Calculating that height gets hairy if you are loading your navigation dynamically, which would then mess up your calculation once you modify the nav. Ideally you don't have to change the value manually. But if your nav isnt expected to change much if at all, I reckon most people can live with the issue. – Michael May 07 '13 at 14:47

score 4 · Answer 2 · answered May 07 '13 at 14:39

4

You can't use CSS transitions with height:auto, only with specific values.

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

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

answered May 07 '13 at 14:39

Blazemonger

90,923
26
142
180

Cheers for that, as I said above, probably just going to follow that advice – raininglemons May 07 '13 at 14:44

score 4 · Answer 3 · answered Sep 05 '16 at 03:32

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
}

score -1 · Answer 4 · answered Mar 26 '21 at 18:56

-1

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%;
  }
}

answered Mar 26 '21 at 18:56

BananaNeil

10,322
7
46
66

Nop you can't animate 0 -> 100% with max height. You were sure of this answer ? Can you provide a Codepen or assimilated ? – Touk Dec 20 '21 at 15:53

CSS Dropdown menu with animation (no js)

4 Answers4

Linked