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.