Mantener fijo un enlace a.active

[JuanKa]

Buenas tardes a todos.

Estoy dando vueltas para ver como modifico éstos menus con css, e modificado algunos valores pero no llego a conseguir lo que deseo.

Esto es lo que pretendo hacer:

1.- Que cuando ingrese a la pagina index.php la pestaña INICIO tengo un color(por ejemplo)
background-color: #1865BF; y el resto de pestañas se mantenga como esta normalmente.

2.- Que cuando seleccione por ejemplo la pestaña "DEPORTES" ésta se MANTENGA con el background-color: #1865BF; (igual que el punto 1), hasta que cambie de pestaña y ésta pestaña("DEPORTES") vuelva a su estado normal, como lo tengo actualmente.


He hecho muchos cambios pero nada.

Aqui os dejo los codigos HTML y el CSS

Código HTML:

<div id="gen__TabsPestanas">
  <ul>
    <li><a href="#"><span>Inicio</span></a></li>
    <li><a href="#"><span>Mis Cuadernos</span></a></li>
    <li><a href="#"><span>Mis Aficiones</span></a></li>
    <li><a href="#"><span>Deportes</span></a></li>
    <li><a href="#"><span>Mi Comunidad</span></a></li>
    <li><a href="#"><span>Galerías</span></a></li>
    <li><a href="#"><span>Foros</span></a></li>    
  </ul>
</div> 

ESTILO CSS

Código HTML:

    #gen__TabsPestanas {
      float:left;
      width:100%;
      background:#FFF;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #24618E;
      }
    #gen__TabsPestanas ul {
      margin:0;
      padding:0px 5px 0px 50px;
      list-style:none;
      }
    #gen__TabsPestanas li {
      display:inline;
      margin:0;
      padding:0;
      }
    #gen__TabsPestanas a {
      float:left;
      background:url("normalX.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #gen__TabsPestanas a span {
      float:left;
      display:block;
      background:url("normalY.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
      
    #gen__TabsPestanas a:hover {
      background-position:0% -42px;
      }
    #gen__TabsPestanas a:hover span {
      background-position:100% -42px;
      }

Gracias y saludos.

[Mikmoro]

Deberías hacerlo con a:focus para la mayoría de los navegadores y a:active para IE6. Pero te advierto que el active puede darte algunos problemas de posicionamiento en IE6, así que es cuestión de probar hasta que este todo en su sitio.

Mikel.