Menú rollover en CSS (con hojas de estilo)

¿Para qué utilizar javascript cuando la solución está en CSS?

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado activo (over) con otro.

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>

background-color de a.botonMenu : color de estado en reposo (out).

background-color de a.botonMenu:hover : color de estado en activo (over).

background-color de a.botonMenu:active : color de estado en selección (click).

Ver ejemplo en marcha

Federico Javier Elgarte
Webmaster de cssboulevar

VitaminaWEB.com 2001-2008
[Portada] · [Datos legales] · [Buzón de contacto] · [Mapa de la web]

Enlaces patrocinados:
Gratis | Concursos | Juegos | Casino online

Hosting recomendado:
Alojamiento web Grito.net