JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <div class="nav">
            <label for="menu-mobil" class="menu-mobile">Menu</label>
            <input type="checkbox" id="menu-mobil" role="button">
            <ul>
                <li class="menu"><a href="#propos">Á Propos</a></li>
                <li class="menu"><a href="#copywriting">Copywriting</a></li>
                <li class="menu"><a href="#traductions">Traductions</a></li>
                <li class="menu"><a href="#references">Références</a></li>
                <li class="menu"><a href="#realisation">Réalisations</a>
                    <ul class="submenu">
                        <li><a href="#">Imprimé</a></li>
                        <li><a href="#">Site Web</a></li>
                        <li><a href="#">Articles</a></li>
                    </ul>
                </li>
                <li class="menu"><a href="#Tarif">Copywriting</a></li>
                <li class="menu"><a href="#articles">Articles</a></li>
                <li class="menu"><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

CSS

nav > div.nav > ul { position: relative; }
nav > div.nav > ul > li {
  
    display: inline-block;
  
}
nav > div.nav > ul > li > ul.submenu {
  
   display: none;
   padding: 0;
  
}
nav > div.nav > ul > li:hover > ul.submenu {
  
   display: block;
   position: absolute;
   top: 22px;
  
}