JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
			<ul>
				<!-- Pour ajouter un onglet:
				<li class="nom facile à se rapeller" id="deroulant"><a href="lien de la page">Nom de l'onget</a></li>
				-->
					<!--Pour ajouter un sous onglet:
					<ul>
						<li class="deroule"><a href="lien de la page">nom du sous onglet</a></li>
					Inserer les lignes à l'endroit entre les onglets ou vous voulez les mettres.
					Attention ne rien ajouter apres les lignes <li class="clear></li>
				 -->
				<li class="Acceuil"><a href="http://dbdatabase.free.fr/pluxml/">Acceuil</a></li>
					
				<li class="lemvbl"id="deroulant"><a href="#">Le MVBL</a></li>
					<ul>
						<li class="deroule"><a href="#">Bureau</a></li>
						<li class="deroule"><a href="#">Inscriptions</a></li>
						<li class="deroule"><a href="#">Séances</a></li>
						<li class="deroule"><a href="#">Championnat</a></li>
						<li class="deroule"><a href="#">Règlement</a></li>
						<li class="deroule"><a href="#">Plan d'accès</a></li>
						<li class="deroule"><a href="#">Contactez-nous!</a></li>
						<li class="clear"></li>
					</ul>
				<li class="vclub"id="deroulant"><a href="#">La vie du club</a></li>
					<ul>
						<li class="deroule"><a href="#">Les équipes</a></li>
							<ul>
								<li class="deroule"><a href="#">équipe1</a></li>
								<li class="deroule"><a href="#">équipe2</a></li>
								<li class="deroule"><a href="#">équipe3</a></li>
								<li class="clear"></li>
							</ul>
					
				<li class="volley"id="deroulant"><a href="#">Le volley-ball</a></li>
					<ul>
						<li class="deroule"><a href="#">Règles</a></li>
						<li class="deroule"><a href="#">Histoire</a></li>
						<li class="deroule"><a href="#">Techniques</a></li>
						<li class="clear"></li>
					</ul>
				<li class="activ"id="deroulant"><a href="#">Activitées du club</a></li>
					<ul>
						<li class="deroule"><a href="#">En cours</a></li>
						<li class="deroule"><a href="#">À venir</a></li>
					</ul>
					
				<li...

CSS

.menu
{
	margin-top:5px;
	width:auto;
	margin-left:2px;
	margin-right:2px;
	font-size:12px;
	text-align:center;
	line-height:40px;
	z-index: 0;
}

.menu ul
{
	padding:0;
	margin:0;
	list-style-type:none;
	z-index: 0;
}

.acceuil, .lemvbl, .vclub, .volley, .activ, .supporters, .deroule
{
background-repeat:no-repeat;
background-position:center center;
float:left;
color:#E6DABA;
z-index: 0;
}

.acceuil a:hover, .lemvbl a:hover, .vclub a:hover, .activ a:hover, .supporters a:hover, .deroule a:hover
{
color:#865308;
z-index: 0;
}

.menu ul li a
{
	display:block;
	text-align:center;
	width:213px;
	height:40px;
	padding:0;
	margin:0;
	z-index: 0;
}

.menu ul li ul
{
	display:none;
	z-index: 0;
}

.deroule
{
	background:blue;
	z-index: 0;
}

#deroulant:hover ul
{
	position:absolute;
	width:213px;
	list-style-type:none;
	display:block;
	line-height:34px;
}

#deroulant:hover ul .deroule a
{
	text-align:center;
	height:34px;
}