JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bloc_page">
    <header>
        <nav>
            <ul id="nav">
                <li><a href="#">Accueil</a>

                </li>
                <li><a href="#">Concept</a>

                </li>
                <li class="parent1"><a href="#">Villes</a>

                    <ul class="sub-nav1">
                        <li><a href="#">Aix-en-Provence</a>

                        </li>
                        <li><a href="#">Aurillac</a>

                        </li>
                        <li><a href="#">Avignon</a>

                        </li>
                        <li><a href="#">Bergerac</a>

                        </li>
                        <li><a href="#">Béthune</a>

                        </li>
                        <li><a href="#">Bron</a>

                        </li>
                        <li><a href="#">Evian</a>

                        </li>
                        <li><a href="#">Lyon</a>

                        </li>
                        <li><a href="#">Montauban</a>

                        </li>
                        <li><a href="#">Saint-Chamond/Rive de Gier</a>

                        </li>
                        <li><a href="#">Saumur</a>

                        </li>
                        <li><a href="#">Thonon-les-Bains</a>

                        </li>
                        <li><a href="#">Toulouse</a>

                        </li>
                        <li><a href="#">Tourcoing</a>

                        </li>
                        <li><a href="#">Vichy</a>

                        </li>
                    </ul>
                </li>
                <li class="parent2"><a href="#">Commercants<br/>partenaire</a>

                    <ul class="sub-nav2">
                        <li><a href="#">Alimentation</a>

                        </li>
                        <li><a href="#">Artisan</a>

                        </li>
                        <li><a href="#">Auto-Moto</a>

              ...

CSS

/* Eléments principaux de la page */
 body {
    background-color: white;
    font-family:'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}
#bloc_page {
    width: 1024px;
    /* Taille de la page */
    margin: auto;
    margin-top: -5px;
}
header {
    background-image: url('image/header.jpg');
    /* bandeau du site */
    width:1024px;
    height:300px;
}
nav {
    text-align:center;
    /* menu du site */
    display: inline-block;
    width: 1024px;
}
nav ul {
    list-style-type:none;
    /* Position du menu*/
    text-align:left;
    padding-top:230px;
    margin-left:20px;
}
nav li {
    float:left;
    /* Position du menu*/
    margin: 10px;
    padding:2px;
}
nav a {
    display: block;
    height: 40px;
    text-align: center;
    color: black;
    text-decoration:none;
}
nav a.sub-nav {
    color:black;
    /* couleur de la police du menu et sous menu */
}
nav ul li ul {
    display:none;
    background-color: #ffde06;
    width: 1024px;
    left: 128px;
    top: 303px;
    font-size : 11px;
    z-index: 1000;
}
#nav ul.sub-nav {
    display: none;
}
#nav ul.visible {
    display: block;
}
nav li ul {
    position:absolute;
    margin:0px;
    padding:0px;
}
.banniere_pub {
    position: relative;
    left: 400px;
    top: 600px;
}

JavaScript

$(document).ready(function () {
    $('.parent1').click(function () {
        $('.sub-nav1').toggleClass('visible');
    });
    $('.parent2').click(function (){
        $('.sub-nav2').toggleClass('visible');
    });
});