Dans vos fichiers html, les menus sont présentés sous formes de boites dans lesquelles on insère une liste de liens. Il existe même une balise <nav> pour cela.
Voici le code html type :
<div id='menu'>
<ul>
<li><a href="page1.html">Première page</a></li>
<li><a href="page1.html">Première page</a></li>
<li><a href="page1.html">Première page</a></li>
</ul>
</div>
Afin d'embellir les menus, on utilise les
"pseudo-classes" pour les liens hypertextes.
Quatre pseudo-classes principales
peuvent être utilisées dans l'ordre précis qui suit, pour qu'elles soient bien
prises en compte.
Pour utiliser ces pseudo-classes, on peut
choisir de faire varier les couleurs, de faire varier les arrières-plan, les
bordures, la typographie, etc...
Pour enlever les puces, on se servira de la
propriété css : list-style-type: none;
Par ailleurs, pour que les menus forment une
barre, lorsque l'on a inscrit son menu dans un bloc div identifié, et que chaque
lien, en html, a été défini comme un élément d'une liste, on positionne son
menu.
Lorsque l'on souhaite que le menu soit une barre horizontale de
navigation, on fixera pour chaque élément "li" de la liste, un positionnement
flottant à gauche. Pour cela on se servira en css du code suivant :
float :
left;
On pourra ensuite s'occuper de l'homogénéité des "boutons" de
liens en fixant également pour chaque li, les marges extérieures (margin) ou
intérieures (padding).
Pour les menus verticaux, on fixera directement
les dimensions des "boutons" avec les propriétés de largeur (width) et de
hauteur (height).
Les adresses ci-dessous donnent des modes d'emplois
pour faire des menus déroulant.
http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
menu
horizontal avec explication vidéo
http://www.marcarea.com/code/css/menu/menu01test.html#
http://www.6ma.fr/tuto/votre+menu+deroulant+css+2-399
http://www.css-faciles.com/menu-deroulant.php