Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
body {
marge: 0;
padding: 0;
}

h2, p {
marge: 10px;
}

ul {
list-style-type: none;
marge: 0;
padding: 0;
débordement: caché;
couleur-de-fond: #38444d;
}

li {
flottant: gauche;
}

li a, .dropbtn {
afficher: inline-block;
couleur: blanc;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
couleur-de-fond: rouge;
}

li.dropdown {
afficher: inline-block;
}

.dropdown-content {
afficher: aucun;
position: absolute;
couleur-de-fond: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
couleur: noir;
padding: 12px 16px;
text-decoration: none;
afficher: bloc;
text-align: gauche;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
afficher: bloc;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Accueil</a></li>
  <li><a href="#news">Nouvelles</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Lien 1</a>
      <a href="#">Lien 2</a>
      <a href="#">Lien 3</a>
    </div>
  </li>
</ul>

<h2>Menu déroulant dans la barre de navigation</h2>
<p>Survolez le lien "Dropdown" pour voir le menu déroulant.</p>

</body>

</html>