Crear un menú dinámico con CSS

Código que nos ayuda a crear un menú con Css similar a los de Javascript.

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 sobre (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 reposo (out).

background-color de a.botonMenu:hover : color de estado sobre (over). background-color de a.botonMenu:active : color de estado seleccionado.

Ver ejemplo en marcha