Via le CSS, il est possible de créer de jolies barres de navigation.

À cette fin, dans la section réservée à la navigation <nav>, on crée une liste non ordonnée de liens. On choisit de supprimer les puces, les marges (intérieures et extérieures) et de donner une couleur de fond. On précise que les éléments <li> s'afficheront à gauche.

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
  overflow: hidden;
}

nav li {
    float: left;
}

overflow: hidden; est donné, ici, sans explication.

Toutefois, pour le dernier élément (menu) qui s'affichera à droite - ici, Contact -, on ajoutera directement dans la balise style="float:right".

      <li style="float:right">
        <a href="#" title="Pour nous contacter">Contact></a>
      </li>
    </ul>
  </nav>

Sauf lorsque le lien est le titre d'un menu, la valeur de l'attribut href est une URL (interne, relative ou absolue).

Puis, on supprime le soulignement des liens et on choisit les couleurs de fond et de texte, lorsque le lien est survolé ou non.

nav a { text-decoration: none; }

nav a:link, nav a:visited { color: white; background-color: black; }
nav a:hover { color: black; background-color: white; }

Puis, les liens devant apparaître dans le sous-menu sont placés dans un block <div> et que ce bloc de liens n'apparaisse qu'au survol du menu, au dessus du texte situé sous la barre de navigation.

<li class="menu">
  <a href="#">Menu 1</a>
  <div class="sousmenu">
    <a href="#">Lien 1</a><a href="#">Lien 2</a> ...
  </div>
</li>

.sousmenu {
    display: none;
    position: absolute;
    z-index: 1;
}

.sousmenu a { display: block; text-align: left; }

.menu:hover .sousmenu { display: block; }

Ce code est donné sans explication.

Il ne reste plus qu'à aérer les éléments du menu (et choisir des couleurs plus jolies)

CSS Navigation Bar