JSFiddle - React, Tailwind, and code Playground

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 {
  height: 0;
  transition: height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

#menu.hover #list {
  transition: height 0.25s ease-in;
}

JavaScript

var menu = document.getElementById("menu")
var menuUl = menu.querySelector("ul")

menu.onmouseover = function() {
  menuUl.style.height = menuUl.scrollHeight + "px"
  menu.classList.add("hover")
}
menu.onmouseout = function() {
  menuUl.style.height = "0"
  menu.classList.remove("hover")
}