JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

CSS

#menu #list {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    background: #d5d5d5;
    border: 5px solid red;
}

#menu:hover #list {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}