CSS: no funciona a:active

[pocketalex]

Tengo un menu secundario, que me interesaria quedara activado el apartado que corresponde al hacer click.

El tema es que me funciona a:hover al crear la classe a:active no funciona. Cambio a:visited y si funciona.

codigo html:

Código HTML:

<div id="menu-secondary" class="menu-container">
 
        <div class="wrap">
 
            
            <div class="menu">
            
            <ul id="menu-secondary-items" class="">
            
                <li id="menu-item"><a href="articulos.html">Articulos</a></li>
                <li id="menu-item"><a href="entrevistas.html">Entrevistas</a></li>
                <li id="menu-item"><a href="chile.html">Chile</a></li>
                <li id="menu-item"><a href="biotecnologia.html">Biotecnología</a></li>
                <li id="menu-item"><a href="ciencia.html">Ciencia</a></li>
                <li id="menu-item"><a href="salud.html">Salud</a></li>
                <li id="menu-item"><a href="proyectos.html">Proyectos</a></li>
                <li id="menu-item"><a href="eventos.html">Eventos</a></li>
                <li id="menu-item"><a href="noticias.html">Noticias</a></li>
 
        </ul>
        
        </div>
            
        </div>
 
    </div><!-- #menu-secondary .menu-container -->
 

codigo css:

Código CSS:

/* Secondary menu 
-------------------------------------------------------------- */
#menu-secondary {
    font-size: 1em;
    width: 100%;
    margin: 0 0 10px 0;
    float: left;
    clear: left;
    position: relative;
    background:#111;
    margin-bottom: 25px;
    z-index: 2;
}
#menu-secondary li {
    display: block;
    float: left;
    width: 100%;
}
#menu-secondary li a {
    font-size: 0.8333333333333333em;
    line-height: 1.2em;
    display: block;
    padding: 1.1em 1.2em;
    text-transform: uppercase;
    color:#fff;
    background:rgb(13, 164, 211);
    border-bottom: 1px solid #252525;
}
#menu-secondary li a:active {
    color: #fff;
    background: #000;
}
#menu-secondary li a:hover {
    color: #fff;
    background: #000;
}
 
#menu-secondary li.current-menu-item a { color: #555; }
#menu-secondary li.current-menu-item li a { color: #ccc; }
#menu-secondary li li, #menu-secondary li li.current-menu-item li {
    clear: both;
    float: none;
}
#menu-secondary li li:first-child, #menu-secondary li li.current-menu-item li:first-child { border-top: none; }
#menu-secondary li li a, #menu-secondary li li.current-menu-item li a {
    text-transform: none;
    color:#ccc;
}
#menu-secondary li li a {
    font-size: 0.9166666666666667em;
    padding: .97em 1.1em;
}
 

Espero me puedan ayudar! ya nose que más probar!!

[JustinKO]

Supongo que es porque debes de poner antes el a:hover que el a:active para que te funcione. Realmente este es el orden que debe de llevar:

Código CSS:

a:visited {}
a:hover   {}
a:active{}
 

Como ves visited va antes de hover, por eso te funciona cuando remplazas el active por éste.

Saludos

[pzin]

Acordarse del orden; link, visited, hover, active: LoVe/HAte

De todas formas también puedes agrupar esas propiedades, ya que son iguales:

Código CSS:

#menu-secondary li a:hover,
#menu-secondary li a:active {
  color: #fff;
  background: #000;
}