Tengo un problema con mi menú, no logro hacer que cuando haga click en una opción del menú (como: home o contáctenos), se quede activado con el fondo y el formato que le he dado al pasar el mouse (:hover).
Según lo que he leido eso se hace con :active pero no me funciona, simplemente es como si active no estuviera.
mi archivo css es este:
Código HTML:
#menu {
font-size: 0.20em;
width: 800px;
margin: 20px auto;
padding:0px 0px;
text-align:left;
}
#menu ul { list-style-type: none;
padding:0;
margin:0;
margin-bottom:0;
}
#menu ul li.nivel1 {
float: left;
/*height:35px; */
/*width: 110px;*/
margin-right: 2px;
color:#FFFFFF;
font-size:11px;
text-align:center;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
background-color: #000000;
padding: 8px;
position: relative;
border: solid 1px #666666;
width: 116px;
height: 20px;
font-family: "Comic Sans MS";
font-weight: bold;
}
#menu ul li:hover,#menu ul li:active{position: relative;
}
#menu ul li a:hover,#menu ul li a:active {
background:url(../images/fondo_menu.jpg);
color: #FFFFFF;
position: relative;
border: solid 1px #804040;
font-weight: normal;
}
#menu ul li:hover a.nivel1,#menu ul li:active a.nivel1 {
position: relative;
color:#000000;
}
#menu ul li a.nivel1 {display: block!important;
display:none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: absolute;left: 0px;
}
#menu ul li:hover ul, #menu ul li:active ul{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {
width: 130px;
height: 20px;
padding: 0px 0px 0px 0px;
border-bottom:solid 2px #804040;
border-left:solid 2px #804040;
border-right:solid 2px #804040;
background:url(../images/submenu1.jpg);
color:#FFFFFF;
font-weight: normal;
left:-9px;
top:13px;
}
#menu ul li ul li a:hover {
position: relative;
border:SOLID 3PX #804040;
background:#9F9F9F;
color:#000000;
font-weight:bold;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
