Télécharger la CSS

Un dernier exemple pour la route : le menu horizontal !

Celui-ci demande un peu plus de bidouille que précédemment pour être réalisé : en effet le premier niveau de sous-menu se déroule sous la racine, alors que les autres niveaux se déroulent à droite de leur racine. On a donc dû ajouter des cas :

div#nav li li {
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	width: 150px;
}

div#nav li li a {
	padding: 3px;
	width: auto;
}

div#nav ul ul {
	position: absolute;
	top: 14px;
	width: 150px;
	display: none;
	height: auto;
	border: 1px solid #000000;
}

div#nav ul ul ul {
	top: 0px;
	width: 150px;
	left: 150px;
}

Là encore, le contenu reste inchangé.

Voilà, donc désormais vous devriez avoir toutes les clefs en main pour vous approprier l'essence de notre CSS, et ainsi l'améliorer, changer le style etc... pour pouvoir faire simplement un site propre et facile à remettre en page.