JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <div class="val">
        HOVER ME
    </div>
        <ul class="submenu">
            <li>submenu 1</li>
            <li>submenu 2</li>
            <li>submenu 3</li>
            <li>submenu 4</li>
            <li>submenu 5</li>
            <li>submenu 6</li>
            <li>submenu 7</li>
            <li>submenu 8</li>        
        </ul>
</div>

CSS

.menu .submenu{
    height : 0px;
    overflow : hidden;
    background-color : #ccc;
    -webkit-animation-name: slideUp;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}
.menu + input .submenu{
    display : block;
     height : 200px;
    -webkit-animation-name: slideDown;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes slideDown{
    from {
        height : 0px;
    }
    to {
       height : 200px;
    }
}

@-webkit-keyframes slideUp{ 
    from{
       height : 200px;
    }
   to {
        height : 0px;
    }
}