Aunque en el pasado se ha utilizado muchísimo el javascript para generar efectos de cambio de color onmousover en un menú, con el uso de únicamente hojas de estilo podemos lograr el mismo efecto.

¿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 sobre (over) con otro.

Código CSS

<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;
} 

Código HTML

<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.

Ejemplo: