JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">

<li><a href="http://www.pierres-info.fr/la_vision/index.html">LA VISION </a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http:/www.pierres-info.fr/les_outils/index.html">LES OUTILS</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/la_taille_directe/index.html" class="ligne2">LA TAILLE DIRECTE</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/le_modele/index.html">LE MODELE</a>
<ul class="menuderoulant">
<li><a href="#auréole">Les croquis</a></li>
<li><a href="#auréole">Le modèle vivant</a></li>
<li><a href="#auréole">Le modelage</a></li>
<li><a href="#auréole">Le moulage</a></li>
</ul></li			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/copie_compas/index.html" class="ligne2">COPIE COMPAS</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/copie_machine/index.html" class="ligne2">COPIE MACHINE</a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http:/www.pierres-info.fr/le_statut_d_artiste/index.html" class="ligne2">LE STATUT D'ARTISTE</a>
<ul class="menuderoulant">			      
</ul></li>

CSS

body {
 font: 12px verdana, sans-serif;
 text-align : center;
 margin: 0;
 padding: 0;
}

#menu
{
    text-align: center;
	list-style-type: none;
    
    background:#eee; /* juste pour voir ton conteneur pour mieu comprendre, si tu ne positionne pas le sous menu en absolute tu verra le bloc s'agrandir*/
    
    /*
    position: absolute; // Préférer le positionnement naturel
    width:85%; // width 100% de son parent par défaut
	height:auto; // déjà par défaut
    margin:auto; //inuitle au pire un 0
	padding:auto;  // inutile au pire un 0
	border: 0; // inutile cet élément n'a pas de bordel par défaut
    */
}

#menu > li
{
    position:relative; /* pour positionner le menu déroulant en absolute par rapport a son parent*/
	display:inline-block;
    vertical-align:top;
    font: 13px Garamond;
    font-weight: bold;
    margin: 1px;
	padding: 0;
    margin:0;
    /*
	width: 105px; // préférer dimensionner le <a> en dessous comme tu l'as fait avec la hauteur
	border: 0; // inutile cet élément n'a pas de bordel par défaut
    */

}
#menu li a{
	width: 105px;
    display:inline-block;
    
	/*display: block;*/
	color: white;  
	background-color: #FF7519;
	margin: 0;
	height:25px;
	line-height:25px;
    padding: 3px;
	/*padding: 3px 3px;*/
	border:1px solid #FFFFFF;
	border-radius:12px;
	box-shadow:4px 4px 8px #999;
	text-decoration: none;
}

#menu li a.ligne2{
	line-height:13px;
}

#menu li a:hover {
    /*background-color: rgb(175, 214, 1); /* utilité ? C'est en double avec la ligne en dessous */
    background-color: #EEE8AA;
    font-weight: bold;
    border:1px solid; /*c'est mieux / plus compréhensible de renseigner une couleur ici aussi*/
    color: #8B4513;
}

#menu .menuderoulant
{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    
	display: none;
	list-style-type: none;
	margin: 0;   
	padding: 0;
	/*border: 0;// inutile cet élément n'a pas de bordel par défaut */
}
#menu .menuderoulant li
{
	/* float: none; // why ? C'était défini float...