Après le menu vertical, voici maintenant un menu horizontal en full largeur sur 2 niveaux.
Celui-ci s’adapte automatiquement suivant la largeur de votre écran, cependant il faudrait pour un mobile adapter celui-ci en le passant verticalement.

Petite note, dans l’exemple il y a 4 liens de menus, pour en mettre plus ou moins il faut changer la largeur des liens de menu de la façon suivante :

La largeur total est de 100% – la marge de droite et de gauche de 2% chacune, ce qui fait une largeur total de 96%.
On a donc 96% / X liens de menu.

Voici quelques exemples :

• Pour 3 liens, cela donne une largeur de 32%.
• Pour 4 liens, cela donne une largeur de 24%.
• Pour 8 liens, cela donne une largeur de 12%.

/* Affichage du 1er niveau du menu */
nav ul li {
	position: relative;
	background-color: black;
	color: white;
	float: left;
	border-right: 1px solid white;
	width: 24%; /* largeur à modifier */
}

Et comme toujours la feuille de style est commentée, vous pourrez donc facilement l’intégrer dans votre site.

Démonstration