Voici le principe de base :
Faire un menu dans une balise <nav> avec une liste <ul>
- menu1
- menu 1.1
- menu 1.2
- menu 2
- menu3
- menu 3.1
- menu 3.2
- menu 3.3
Et pour afficher le menu déroulant rien de plus simple : nav ul li:hover ul { display:block;}
Par la suite on rajoute un peu de CSS pour afficher le tout de façon plus estétique, mettre les menu déroulant en position absolut et fixer la largeur du menu déroulant. Enlever les puce des listes, géré les marge et padding.
Ce site fonctionne avec ce principe
Exemple de code CSS pour menu déroulant:
nav ul {list-style:none; padding:0px; margin:0px; }
nav ul li { float:left; padding:0px; margin:0px; padding-right:20px; }
nav ul li ul{ margin:0px; padding:0px; position:absolute; float:none; display:none; }
nav ul li:hover ul {display:block; }
nav ul li ul li { margin:0px; padding:0px; float:none;}
nav ul li ul li a {width:150px; display:block;}
Aucun commentaire:
Enregistrer un commentaire