JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">Alpha
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Beta
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Gamma
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

ul {
    border:2px solid #aaf;
    overflow:hidden;
}
li {
    max-height:0px;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    transition: max-height 1s;
}
ul:hover li {
    max-height:500px;
}