Criar um menu dinâmico com CSS

[helldanger1]

Código que nos ajuda a criar um menu com CSS similar aos de Javascript.
Por Federico Elgarte

O seguinte estilo nos permite criar um menu similar aos de javascript, onde representamos seu estado de repouso (out) com uma cor e seu estado sobre (over) com outra.

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

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

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

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

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

<div id="menu"><div class="barraMenu">
<a class="botaoMenu" href="">Opção 1</a>
<a class="botaoMenu" href="">Opção 2</a>
<a class="botaoMenu" href="">Opção 3</a>
<a class="botaoMenu" href="">Opção 4</a>
</div></div>
background-color de a.botaoMenu : cor de estado repouso (out).
background-color de a.botaoMenu:hover : cor de estado sobre (over).
background-color de a.botaoMenu:active : cor de estado selecionado.