122
Maîtrise des CSS
Le.tour.de.magie.se.produit.maintenant..En.ajoutant.une.pseudo-classe.hover.à.l’élément.
de.liste.parent,.on.peut.faire.réapparaître.la.liste.en.changeant.sa.position.pour.la.ramener.à.
son.emplacement.de.départ..
.nav li:hover ul {
left: auto;
}
Les.styles.suivants.obligent.les.liens.de.navigation.à.se.comporter.comme.des.éléments.de.
niveau.bloc.et.changent.l’apparence.de.la.liste.en.leur.attribuant.des.couleurs.d’arrière-plan.
et.des.bordures.biseautées.
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}
/*suppression des bordures indésirables sur les derniers éléments de liste*/
ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}
ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}
Et.le.tour.est.joué :.vous.venez.de.créer.une.barre.de.navigation.à.menus.déroulants.simple,.
entièrement. en. CSS.. Cette. technique. fonctionne. dans. la. plupart. des. navigateurs. web.
modernes,.mais.pas.dans.les.anciennes.versions.d’Internet.Explorer,.qui.ne.reconnaissent.
pas.la.pseudo-classe.:hover.pour.les.éléments.qui.ne.sont.pas.des.ancres..Pour.contourner.
ce.problème,.vous.pouvez.utiliser.quelques.lignes.de.JavaScript.ou.un.fichier.de.comportement..htc.qui.active.cette.fonctionnalité..
Le code JavaScript pour le correctif des menus déroulants sous Internet Explorer n’est pas du ressort de
ce livre, mais vous trouverez plus de détails à ce sujet à la page (en anglais) http://htmldog.com/
articles/suckerfish/dropdowns/.