JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<nav>
    <ul>
    <li class="acceuil"><a href="./index.html">Accueil</a></li>
        <ul class="submenu">  
            <li><a href="./one.html">one</a></li>
            <li><a href="./two.html">two</a></li>
            <li><a href="./three.html">three</a></li>
        </ul>   <!-- fermeture du div du sous menu acceuil -->
        <li><a href="./facts.html">Facts</a></li>
        <li><a href="./news.html">Actualités</a></li>
        <li class="contact"><a  href="./contact.html">Contact</a></li>
        <ul class="submenu2">
            <li><a href="./other.html">other</a></li>
            <li><a href="./another.html">another</a></li>
        </ul> <!-- fermeture du div du sous menu contact -->
    </ul>

CSS

.submenu, .submenu2 {
  display:none;
}

nav ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  list-style:none;
  
}

nav ul li a {
  text-decoration:none;
  background:cyan;
  transition:all ease .3s;
  color:white;
  padding:5px;
  border-radius:5px;
}

nav ul li a:hover {
  background:grey;
}

li.accueil:hover ul.submenu {
  display:block;
}

li.contact:hover ul.submenu2 {
  display:block;
}