JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="menu">
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a>
        <ul class="sous-menu">
          <li><a href="#">Sous-lien 1</a></li>
          <li><a href="#">Sous-lien 2</a></li>
          <li><a href="#">Sous-lien 3</a></li>
          <li><a href="#">Sous-lien 4</a></li>
        </ul>
    </li>
    <li><a href="#">Lien 3</a></li>
    <li><a href="#">Lien 4</a></li>
  </ul>
</nav>

CSS

/* reset */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

.menu{
  text-align: center;
  position: relative;
}

.menu > li{
  display: inline-block;
  
}

.sous-menu{
  border: 1px solid red;
  display: none;
  /* position */
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
}

.sous-menu li{
  display: inline-block;
}

/* on affiche le menu au survol */

.menu li:hover .sous-menu{
  display: block;
}