JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<nav role="navigation" class="mycms-content-wrapper mycms-main-menu" id="container-main-navbar" aria-label="Navigation principale">
  <div class="container" tabindex="-1">
    <div id="main-navbar" class="menu-principal-container">
      <ul id="main-nav" class="">
        <li id="menu-item-6866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6866"><a href="http://mycms.local/conseils/">Conseils</a>
          <ul class="sub-menu">
            <li id="menu-item-11636" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11636"><a href="http://mycms.local/test-import/">Test import</a></li>
          </ul>
        </li>
        <li id="menu-item-8071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8071"><a href="http://mycms.local/nos-services/">Nos services</a></li>
        <li id="menu-item-7990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7990"><a href="http://mycms.local/contact/">Contact</a></li>
      </ul>
    </div>
  </div>

  <div class="mycms-header--cta mycms-u-hidden--lg mycms-u-visible">
    <a href="http://mycms.local/mon-compte/" class="mycms-login btn btn--primary mycms-u-visible--lg mycms-u-visible--sm" title="Mon compte">
      Mon compte </a>

  </div>
</nav>

SCSS

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

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

}

.sub-menu{

  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: beige;

  display: none;
}

.menu-item:hover > .sub-menu {
  display: block;
}