JSFiddle - React, Tailwind, and code Playground

HTML

<div>
menu
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>

CSS

div {
  background: blue;
  display: inline-block;
  transition: background 400ms;
  color: white;
}

div:hover {
  background: tomato;
  cursor: pointer;
}

ul {
  padding: 0;
  list-style: none;
  display: none;
}

li {
  padding: 0.4rem 2rem;
}

li:hover {
  background: teal;
  display: inline-block;
}

div:hover ul {
  display: block;
}