Menu horizontal souligné

20 février 2008

Un menu en CSS avec un soulignement et changement de couleur des caractéristiques au passage de la souris

Dans le CSS de votre feuille de style:

#main-menu { margin:0; bottom:0; right:0; font-family: Comic Sans MS; white-space:nowrap; font-size: 80%; } #main-menu li { display:block; float:left; list-style-type:none; margin:2px; padding:0; text-transform: uppercase; } /*Les liens normaux*/ #main-menu a { display:block; float:left; padding:10px 16px 10px 16px; background:#fff; border-bottom: 3px solid #4F536C; color: #4F536C; font-weight: normal; text-decoration: none; } /*Les liens au survol et rubrique en cours*/ #main-menu a:hover, #main-menu #selected a { color:#D1481B; background: #EAE8E1; border-bottom: 3px solid #D1481B; font-weight: normal; text-decoration: none; }

Le code HTML à mettre entre les balises <body> et </body>

<ul id="main-menu"> <li id="selected"><a href="#">Accueil</a></li> <li><a href="#" title="Le design">Le design</a></li> <li><a href="#" title="Les codes">Les codes</a></li> <li><a href="#" title="Les petits plus">Les petits plus</a></li> <li><a href="#" title="Nous contacter">Contact</a></li> </ul>

Posté par arian à 13:47 - Commentaires […] - Permalien [#]

Tags: Menu horizontal souligné

Partager cet article

Vous aimez ?

0 vote

Menu horizontal

Texte animé dans une boîte

Commentaires