JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sidemenu">
    <li><a href="#">Item</a>
        <ul>
            <li>A sub item</li>
            <li>A sub item</li>
            <li>A sub item</li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style: none;
    padding: 0;
    float: left;
}

.sidemenu li ul {
   max-height: 1px;
   overflow:hidden;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;

}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;

}