JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
			<ul id="menu">
				<li><a href="devises.html">Les devises</a></li>
				<li><a href="ecrits_antiquaires.html">Les antiquités de Lyon</a></li>
				<li><a href="portraits_astro_3_diaporama.html">Les portraits astrologiques</a>
                <ul class="menu2">
                        <li><a href="#">Introduction</a></li>
                        <li><a href="#">Le portrait</a></li>
                        <li><a href="#">Simeoni et l'astrologie</a></li>
                        <li><a href="#">Thème astral de Simeoni</a></li>
                        <li><a href="#">Le Tre parti del Campo</a></li>
                        <li><a href="#">Astrologie et talismans</a></li>
                        <li><a href="#">Des différences...</a></li>
                        <li><a href="#">Les Illustres observations...</a></li>
                        <li><a href="#">Portrait de Charles Quint</a></li>
                        <li><a href="#">Cadre de devise</a></li>
                        <li><a href="#">Vita d'Ovidio</a></li>
                        <li><a href="#">Dialogo Pio et Speculativo</a></li>
                </ul></li>
			</ul>
		</nav>
    
    <section>
    texte section texte section texte section texte section texte section texte section texte section texte section texte section texte section texte section texte section texte section
    </section>

CSS

nav
{
  background-color: #9D8099;
  opacity: 0.8;
}
nav a
{
  text-decoration: none;
  color: #FFFFFF;
}
nav ul
{
  text-align: center;
  font-size: 30px;
  color: #D9D9D9;
  text-shadow: 6px 6px 6px black;
  line-height: 40px;
  list-style-type: none;
}
nav li
{
  position: relative;
	display: inline;
	width: 90%;
	height: 40px;
}
nav ul ul
{
  z-index: 4;
  display: none;
  font-size: 25px;
  text-align: center;
}
nav ul ul li
{
	display: block;
}
li:hover ul.menu2
{
  z-index: 4;
  display: block;
}
.menu2 
{
  z-index: 4;
  position: absolute;
  background-color: #9D8099;
  top: 40px;
  left: 0;
}