JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul role="list" class="navigation">
  <li class="navigation-item"><a href="#">Nos produits</a>
    <ul class="navigation-flyout navigation-flyout--1">
      <li class="navigation-item"><a href="#">Accès léger</a>
        <ul class="navigation-flyout navigation-flyout--2">
          <li class="navigation-item"><a href="#">Échelles</a></li>
          <li class="navigation-item"><a href="#">Marchands</a>
            <ul class="navigation-flyout navigation-flyout--3">
              <li><a href="#">Accessoires</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
              <li><a href="#">Autres</a></li>
            </ul>
          </li>
          <li class="navigation-item"><a href="#">Plateforme</a></li>
          <li class="navigation-item"><a href="#">Échafaudage</a></li>
        </ul>
      </li>
      <li class="navigation-item"><a href="#">Échaffaudage de façade</a></li>
      <li class="navigation-item"><a href="#">EPI Antichute</a></li>
      <li class="navigation-item"><a href="#">Modulaire circulation</a></li>
    </ul>
  </li>
  <li class="navigation-item"><a href="#">Nos services</a></li>
  <li class="navigation-item"><a href="#">Conseils</a></li>
  <li class="navigation-item"><a href="#">Contact</a></li>
</ul>

CSS

.navigation {
  position: relative;
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}
  
.navigation ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.navigation-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: beige;
  
  display: none;
}

.navigation-flyout--1 > li {
  position: relative;
  width: 33.333%;
}

.navigation-flyout--2,
.navigation-flyout--3 {
  top: 0;
  left: 100%;
  width: 100%;
}

.navigation-flyout--2 {
  background-color: lightblue;
}

.navigation-flyout--3 {
  background-color: lightpink;
}

.navigation-item:hover > .navigation-flyout {
  display: block;
}