Des menus déroulants

J'ai transformé le menu vertical gauche en un menu horizontal déroulant pure CSS. Il fait appel à la fonction hover qui permet d'assigner certaines propriétés lorsqu'on passe la souris au-dessus d'une boîte spécifique. Dans le cas présent, elle est appliquée aux listes de définition utilisées dans le menu: seul le titre (balise dt) est affiché, les sous-titres (balises dd) étant masqués par un display: none. Ensuite, le fait de survoler les dits-titres avec la souris déroulera le sous-menu dans son intégralité grâce à un display: block.

Cette astuce est adapté de l'article Pure css menus d'Eric Meyer, l'un des gourous des feuilles de styles. Vous pourrez aussi trouver deux très beaux exemples d'utilisation des menus déroulants en css, l'un sur le site CSS Play, l'autre sur HTML Dog.

Ce changement était souhaitable pour éviter de garder une colonne gauche (ou droite selon l'humeur) presque vide; la nouvelle mise en page ne s'y prêtait pas vraiment. La précédente non plus d'ailleurs, mais j'avais occulté la chose en rendant ce menu fixe. Le menu déroulant pose encore quelques problèmes de mise en page et d'accessibilité, ce n'est donc peut-être qu'une solution provisoire.

Ah oui, j'oubliais: Internet Explorer ne comprend pas la propriété hover appliquée à autre chose qu'à un lien :-).