Faire un menu horizontal valide très simplement

Plusieurs personnes m'ont déjà demandés comment faire un menu horizontal simplement pour leur site. J'ai donc décidé de vous mettre à disposition un code simple et valide, fonctionnant sur tout les navigateurs et permettant de réussir à coup sur cette tache. Il vous sera possible par la suite de changer complétement le design en rajoutant vos propriétés CSS. Mais pour mon exemple j'ai voulu garder un code minimal.

Le rendu sera le suivant :

Voici comment bien créer votre fichier html en respectant les normes W3C et les normes d'usages.

Lien 1
Lien 2
Lien 3
Lien 4
Lien 5


	Bonjour

Voici maintenant comment créer votre fichier CSS lui aussi valide.

/* Style générique */
*{margin: 0px;padding: 0px;}
h1, h2, h3, h4, h5, h6{padding-top: 15px;padding-bottom: 10px;}
p{text-indent: 20px;padding-bottom: 5px;text-align: justify;}
a{text-decoration: none;}
a img{border: none;}
body{color: #333;}

/* Style pour le menu */
ul{
	list-style-type:none; /* Suppression des puces*/
}

li{
	float:left; /* Correction d'un bug IE*/
}

ul li a{
	display:block; /*Afficher sous forme de bloc*/
	float:left; /*Faire flotter à gauche*/
	text-align:center; /*Aligner le texte au milieu de la case*/
	padding:5px 10px; /*Ajout de marges*/
	color: #08C; /*Couleur du texte*/
	font-size: 12px; /*Taille du texte*/
	border-right: 1px solid #08C; /*Ajout d'une bordure*/
	font-family:Verdana, Arial, Helvetica, sans-serif; /*Police du texte*/
}

ul li a:hover, #menu_courant{
	background-color: #08C;
	color: white;
}

#menu{
	border-bottom: 1px solid #08C;
	height: 25px;
}

J'espère que cet exemple vous sera utile. N'hésitez pas à me demander si vous avez besoin de plus de détails.