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 ajoute du padding au LI pour qu'il touche le div sous-menu-parent*/
}

/* 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; /* on fait monter le div sous-menu-parent pour qu'il touche le padding du LI */
  width: 600px;
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}