CSS transitions in drop-down menu

Question:

Having a collapsible menu how to use CSS transition to open/close the part that is open and the part that is closing at the same time ?

The problem does not arise if the menus have the same size (example) , but when the size is different it gives the idea that the CSS reads the max-height as the real value and not as a maximum…

Example of the problem here: Fiddle

---

HTML

<div class="max">
    <ul class="menu">Pequena
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul class="menu">Pequena
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul class="menu">Grande
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten!</li>
    </ul>
</div>

CSS

.max ul {
    border:2px solid #a5f;
    overflow:hidden;
    max-height:20px;
    transition: all 1s ease-in-out;
}

.max ul.opened {
   max-height: 250px;
}

Answer:

By setting the height of each <li> to zero by default (default), you can set the height to 20px when .opened , even though it doesn't have the exact same visual effect

Example