JSFiddle - React, Tailwind, and code Playground

by Ripley69

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>
                        <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>

CSS

nav
{
  font-weight: bold;
  color: #D9D9D9;
  background-color: #9D8099;
  opacity: 0.8;
}
nav a
{
  text-decoration: none;
  color: #FFFFFF;
}
nav ul
{
  display: inline-block;
  text-align: center;
  font-size: 30px;
  line-height: 40px;
  list-style-type: none;
}
nav ul ul
{
  display: none;
  font-size: 25px;
  text-align: center;
}
li:hover ul.menu2
{
  display: block;
}