JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Div_central">
    <!-- Central Menu et Texte //-->
	<div class="Div_Menu_Gauche">
		<!-- Menu de navigation Gauche //-->
		<ul>
			<li><a href="javascript:void(0);">Accueil</a></li>
			<li><a href="Site/Fetes_de_la_st_pierre.html" style="letter-spacing:-0.04em;">Fete de la St Pierre</a></li>
			<li><a href="Site/Fetes_du_chateau.html">Fete du Chateau</a></li>
			<li><a href="Site/Evenements_annuels.html">Evenements annuels</a>
				<ul>
					<li><a href="Site/Foires.html">&gt;Foires</a></li>
					<li><a href="Site/Lotos.html">&gt;Lotos</a></li>
					<li><a href="Site/Petanque.html">&gt;Petanque</a></li>
					<li><a href="Site/Belote.html">&gt;Belote </a></li>
				</ul>
            </li>
			<li><a href="Site/Tete_Affiche.html">En tete d'affiche</a></li>
			<li><a href="Site/Associations.html">Associations</a></li>
			<li><a href="Site/Album_Souvenir.html">Album Souvenir</a></li>
			<li><a href="Site/Presentation_l_isle_de_noe.html">L'Isle de Noe</a></li>
			<li><a href="Site/Le_chateau.html">Le Chateau</a></li>
			<li><a href="Site/Acces_contact.html">Acces-Contact</a></li>
			<li><a href="Site/Partenaires.html">Partenaires</a></li>
			<li><a href="Site/Historique.html">Historique</a></li>
			<li><a href="Site/Archives.html">Archives</a></li>
			<li><a  class="current" href="Site/Liens.html">Liens</a></li>
		</ul>
	</div>
</div>

CSS

/* Classe DIV Central Menu et Texte */
.Div_central {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

/* Classe DIV Menu gauche */
.Div_Menu_Gauche {
	border-style: none;
	border-color: #000000;
	border-width: 1px;
	background-color: #990000;
	width: 185px;
	height: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: left;
 	display: block;
}

/* Liste UL */
ul  {
	border-style: none;
	background-color: #990000;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI */
li  {
	border-style: none;
	background-color: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}

/* Liste LI Principal */
ul a {
	font-family: "Comic Sans MS";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 177px;
	margin-left: 0px;
}

/* Liste LI Principal Hover */
ul a:hover {
	color: #b8f4cc;
	background-color: #CC99CC;
}

/* Liste LI Principal Actif */
ul a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Principal Actif Survol */
ul a.current:hover {
	color: #000000;
	background-color: #CC99CC;
}

/* Liste LI Secondaire */
ul ul a {
	font-family: "Comic Sans MS";
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-color: #b8f4cc;
	display: block;
	padding: 4px;
	width: 162px;
	margin-left: 15px;
}

/* Liste LI Secondaire Hover */
ul ul a:hover {
	color: #b8f4cc;
	background-color: #CC9966;
}

/* Liste LI Secondaire Actif */
ul ul a.current {
	color: #00aa00;
	background-color: #b8f4cc;
}

/* Liste LI Secondaire Actif Survol */
ul ul a.current:hover {
	color: #000000;
	background-color: #CC9966;
}