JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <span>hover me</span>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

CSS

#list {
    max-height: 0;
    transition: max-height 1s ease-in-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
}