Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120641 Menu avec effet de survol | | Coucou Voici comment faire un menu avec un effet au survol Menu avec effet de survol - Code:
-
<html> <head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <style type="text/css"> ul.liste, .liste li, .liste a {padding:0px ; margin:0px} /*met à 0 les marges internes et externes de la liste et des liens */
.liste {width :15em ; /* largeur de la liste : environs 15 lettres majuscules - voir em */ list-style-type:none} /* suppression des boutons CSS devant les items de la liste */
.liste li a {border-left:1.5em solid gray ; /* crée un gros carré gris à gauche des liens non survolés */ background-color:#CCD ; /* couleur de fond des liens non survolés */ display:block; /* force le lien à prendre 100% de la largeur de la liste */ padding-left:0.5em ; /* insère un espace entre le texte du lien et le gros carré gris */ color:black ; /* la police des liens non survolés est noire */ text-decoration:none ; /* on suprime le soulignement des liens */ height:1.5em} /* hauteur de chaque ligne. N'est indispensable que pour IE 5.0 et 5.5 */
.liste li a:hover { /* style des liens lors du survol */ background-color:black ; /* le fond du lien passe au noir */ color:white ; /* le texte passe au blanc */ border-left-color:red} /* crée un gros carré rouge à gauche des liens survolés */ </style> </head>
<body> <ul class="liste"><!-- liste --> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 4</a></li> </ul> </body> </html> |
| |