JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a href="">Menu</a></li>
    <li>
      <a href="">Menu</a>
      <ul>
        <li><a href="">Sous menu</a></li>
        <li><a href="">Sous menu</a></li>
        <li><a href="">Sous menu</a></li>
      </ul>
    </li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
  </ul>
</nav>

CSS

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

nav>ul>li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

ul ul {
  position: absolute;
  top: -9999px;
  left: 0;
}

nav>ul>li:hover>ul {
  top: 100%;
}

li li {
  white-space: nowrap;
}

li:hover>a {
  color: red;
}