Soy nuevo en este foro y muy novato en css. Veréis tengo una web con menus css y necesito que una vez clickeado el botón elegido, éste se mantenga activado y no vuelva a estar gris como el resto. Os pego aqui mi codigo:
CSS:
#menu20 {
padding:0;
margin:0;
list-style:none;
width:701px;
height:45px;
position:absolute;
top:-4px;
left:248px;
}
#menu20 li {position:relative; float:left;}
#menu20 li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(images/button-off.png);}
#menu20 li a b {position:relative; top:12px; font-weight:normal;}
* html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='single_twelve/button-off.png', sizingMethod='scale');}
#menu20 li a:hover,
#menu20 li a:active,
#menu20 li a:focus,
.home #menu20 li#home a,
.single #menu20 li#single a,
.dropdown #menu20 li#dropdown a,
.dropline #menu20 li#dropline a,
.flyout #menu20 li#flyout a,
.support #menu20 li#support a,
.contact #menu20 li#contact a
{background: url(images/button-on.png) no-repeat right top; cursor:pointer; color:#fff;}
* html #menu20 li a:hover,
* html #menu20 li a:active,
* html #menu20 li a:focus,
* html .home #menu20 li#home a,
* html .single #menu20 li#single a,
* html .dropdown #menu20 li#dropdown a,
* html .dropline #menu20 li#dropline a,
* html .flyout #menu20 li#flyout a,
* html .support #menu20 li#support a,
* html .contact #menu20 li#contact a
{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='single_twelve/button-on.png', sizingMethod='scale');}
#menu20 li a:hover b,
#menu20 li a:active b,
#menu20 li a:focus b,
.home #menu20 li#home a b,
.single #menu20 li#single a b,
.dropdown #menu20 li#dropdown a b,
.dropline #menu20 li#dropline a b,
.flyout #menu20 li#flyout a b,
.support #menu20 li#support a b,
.contact #menu20 li#contact a b
{cursor:pointer; top:8px; padding-right:3px;}
En el documento html:
<div id="menuContainer" span align="center"style="position:absolute; top:-16px; left:-102px; width:98px; height:87px;visibility:visible z-index:50">
<ul id="menu20">
<li id="home" class="first"><a href="almeria-guia.html"><b>Guia</b></a></li>
<li id="single"><a href="almeria-historia.html"><b>Historia</b></a></li>
<li id="dropdown"><a href="almeria-mapas.html"><b>Mapas</b></a></li>
<li id="dropline"><a href="almeria-fotos.html"><b>Fotos</b></a></li>
<li id="dropline"><a href="almeria-extra.html"><b>Material Extra</a></li>
<li id="support"><a href="almeria-conclusiones.html"><b>Conclusiones</b></a></li>
</div>
Toda ayuda será bienvenida y muchas gracias de antemano!!!!
