menu en CSS que quede seleccionado

[bigpixel]

Hola a todos...

tengo un gran problema que no consigo solucionar... si alguien puede ayudarme se lo agradece muchísimo!

tengo un menu principal (ej. www.alimentacioremunerada.com) que mediante css hago que tenga efectos de rollover, pero no consigo hacer que cuando el usuariio clicle, este quede seleccionado con un color de fondo distinto.

en el css tengo esto:

#menu1{
width: 850px;
height: 37px;
margin-top:10px;
background-color:#8c8c8c;
}
#navi {
list-style:none;
margin-left:5px;
line-height:37px;
padding:0;
}
#navi li {
margin:0px;
padding-left:30px;
float:left;
}
#navi li a {
display:block;
width:966px;
padding:0px 10px;
text-decoration:none;
text-align:center;
font-size:11px;
color:#f9c801;
font-family:Arial, Helvetica, sans-serif;
}
#navi li a:hover {
color:#fff;
background-color:#666;
}

y en el html:

<div id="menu1">
<ul id="navi">
<li><a href="index.html">PRODUCTOS</a></li>
<li><a href="#">REFERENCIAS</a></li>
<li><a href="#">EMPRESA</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</div><!-- FIN ID menu1 -->

alguien sabe como hacerlo?
mil gracias!!

[gines86]

Luego lo miro bien que ahora salgo de trabajar, pero si no me equivoco deberias añadir al css un li active, he indicar en cada página cual es el li activo.

#navi li active

[bigpixel]

Gracias Gines! lo del li active, lo entiendo..pero como le digo a cada pagina que es la que se queda activada??

mil gracias!

[bigpixel]

no se esta bien.. pero lo visualmente lo he solucionado.

en html he puesto esto:

<li><a href="index.html"><span>PRODUCTOS</span></a></li>

y en el css:

#navi li a span {
color:#fff;

}

no se si esta bien o es una chapuza... jeje...que opinas?