JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>MENU</p>
  <ul>
    <li>menu one</li>
    <li>menu two</li>
    <li>menu three</li>
  </ul>
</div>

CSS

div {
  position: relative;
  display: inline-block;
  padding: 0.5em 1.5em;
  box-sizing: border-box;
  background: tomato;
}

div:hover ul {
  max-height: 1000px;
  transition: 500ms max-height ease-in-out;
}

ul {
  position: absolute;
  top: -10%;
  right: -100%;
  max-height: 0;
  overflow: hidden;
  transition: 500ms max-height ease-in-out;
}

li {
  border: 1px solid orange;
  cursor: pointer;
}

li:hover {
  background: orange;
  color: white;
}