CSS transitions in expandable menu

By setting the height of each <li> to zero by default (default), you can set the height to 20px when it is .opened , even though it does not have exactly the same visual effect

Example

Hello, I've made an example with the hover event because it's more practical!

I do not know if the inclusion of a new class is ideal, it is less dynamic.

HTML:

<ul class="max">
<li class="menu">Pequena
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</li>
<li class="menu">Pequena
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</li>
<li class="menu gr">Grande
    <ul>
        <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>
</li>

CSS:

.max{
    width: 250px;
    height: 400px;
    overflow:hidden;
}

.max > li{
    height: 18px;
    width: 200px;
    margin-bottom:10px;
    padding: 4px;
    padding-left: 20px;
    border:2px solid #a5f;
    float:left;
    overflow:hidden;    
    -moz-transition:all 0.2s ease-out;
    -webkit-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
    -moz-transition-delay:0.15s;
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s;
}

.max > li:hover{
    height: 80px;
}

.max > li.gr:hover{
    height: 215px;
}

.max > li ul li{
    width: 100px;
    text-align: left;
}

See the Fiddle

Since you're using Javascript to add the class, why not use a jQuery to do this? You would not work the fixed size ... and then they would behave like an accordion ..

HTML:

<ul>
    <li>
        Pequeno
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
     <li>
        Grande
        <ul>
             <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>
    </li>

</ul>

jQuery

$("ul li").click(function(){
    //Quando clica esconde QUALQUER que estiver aberta
    $("ul li ul:visible").slideUp();
    //Abre a que possui hierarquia com a que você clicou:
    $(this).children("ul").slideToggle(); 
});

Fiddle

You are encountering this delay problem in the animation because of the max-height property.

Note that on your Fiddle, if you replace max-height with height the problem does not happen. (Although the layout looks different than what you want, probably.)

The delay is caused by the Browser interpolating the max-height property of the 250px value to the 20px value within one second. Since 250px is greater than the element's "effective" height, there is a delay until the value of the max-height property is less than the height of the element so that it begins to be "cut."

As far as I know, no browser is currently able to correctly interpolate between a specific value of max-height , 20px , and automatic value, default . (Google Chrome interpolates 20px with 0px , and then displays the height generated by default , while Firefox disables the CSS transition completely.)

Unfortunately it will probably be necessary to specify the exact height per element, or use another effect if you want to do this with CSS only.