JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="mainMenu">
    <li><a href="#">Lien 1</a>
    </li>
    <li><a href="#">Lien 2</a>
      <div class="sous-menu-parent">
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
        </ul>
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
        </ul>
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
        </ul>
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 4</a></li>
          <li><a href="#">Sous-menu 4</a></li>
          <li><a href="#">Sous-menu 4</a></li>
          <li><a href="#">Sous-menu 4</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Lien 3</a></li>
    <li><a href="#">Lien 4</a>
     <div class="sous-menu-parent">
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
          <li><a href="#">Sous-menu 1</a></li>
        </ul>
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
          <li><a href="#">Sous-menu 2</a></li>
        </ul>
        <ul class="sous-menu-enfant">
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
          <li><a href="#">Sous-menu 3</a></li>
        </ul>
        <ul class="sous-menu-enfant">
         ...

CSS

/* reset */

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

ul{
  list-style-type: none;
}

/* menu principal */

.mainMenu > li{
  display: inline-block;
  position: relative;
  padding-bottom: 20px;
}

/* on affiche le div parent qui contient les sous-menus enfants*/
.mainMenu > li:hover .sous-menu-parent{
  display: block;
}

/* Sous-menus */

.sous-menu-parent{
  display: none;
  position: absolute;
  top: 30px; 
  width: 500px;
  padding-top: 10px;
  border: 1px solid red;
}

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