JSFiddle - React, Tailwind, and code Playground

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>
</ul>

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