Comment mettre un menu à l'horizontal en CSS

Nous allons transformer le menu vertical  ci-dessous afin qu'il s'affiche à l'horizontal

Le code html pour ce menu vertical
<ul>
<li><a href="#">Lien 1</li>
<li><a href="#">Lien 2</li>
<li><a href="#">Lien 3</li>
<li><a href="#">Lien 4</li>
</ul>

 

En CSS, on va commencer par supprimer les puces avec list-style-type:none

ul {
list-style-type:none;
}

On va ensuite s'occuper des liens afin qu'ils flottent sur la gauche et qu'ils ne se supperposent pas. On applique donc un float:left.

lien menu

Ce n'est bien sûr pas très esthétique pour le moment. On va donc appliquer des marges extérieures et intérieures (margin et padding). On va également ajouter une couleur d'arrière-plan.
Ce qui nous donne en css (j'ai appliqué une class (menutest) afin de différencier le menu de tout autre menu ou liste présent sur le site.

ul.menutest
{list-style-type:none
}

 li.menutest
{
float:left;
margin-right:15px;
padding: 8px;
background: #850502
}