[Resolvido] Função active não funciona

[MOISÉS RODRIGUES 0]

Olá amigos bom dia, estou utilizando um menu fornecido gratuitamente na web, porem não consigo ativar a função :active, ficarei muito grato caso possam me ajudar, desde já agradeço a atenção de todos.

 

Forte abraço e um excelente 2013.

 

<!-- HTML -->	

   <nav>
   <ul id="menuNav">

   <li><a href="#"home_1.htm="home_1">Home_1</a></li>
   <li><a href="#"home_2.htm="home_2">home_2</a></li>
   <li><a href="#"home_3.htm="home_3">home_3</a></li>
   <li><a href="#"home_4.htm="home_4">home_4</a></li>
   </ul>    
   </nav>

/* CSS  */

#menuNav { margin:5px 0; list-style:none;

   /* Estilo de fontes e tamanhos */

   font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:12px;

   /* Aplica uma sutil text-shadow ao texto */

   text-shadow: 0 -1px 3px #202020;

   /* Adciona uma sutil sobra na parte inferior do menu */

   width:987px; height:34px;

      -moz-border-radius:4px;
      -webkit-border-radius:4px;
       border-radius:4px;

      -webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.45);
      -moz-box-shadow:    0px 1px 4px rgba(50, 50, 50, 0.45);
       box-shadow:         0px 1px 4px rgba(50, 50, 50, 0.45);
}

#menuNav li {
display: block;
float: left;
border-right: 1px solid #5d5d5d;
border-left: 1px solid #929292;
width: 127px;
height: 34px;
border-bottom: 1px solid #575757;
border-top: 1px solid #797979;

/* fundo gradiente para os botões * http://gradients.glrzad.com/ */

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color: #5f5f5f; /* Fallback */
}


/* estado normal  */

#menuNav li:not(:last-child) a {
color: white;
text-decoration: none;
text-align: center;
display: block;
line-height: 34px;
outline: none;
}

/* Define os estados quando pairar o mouse */

#menuNav li:not(:last-child):hover {
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5,   #383838), color-stop(0.51, #434343), color-stop(1, #555555));
        background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
        background-color:#383838; /* Fallback */

 /* Usamos a inserção da sombra caixa para criar um brilho sutil interior quando pairar */
       -moz-box-shadow: inset 0 0 5px 5px #535353;
       -webkit-box-shadow: inset 0 0 5px 5px #535353;
       box-shadow: inset 0 0 5px 5px #535353;
}

/* Quando o usuário clica no botão, é mudado a inserção  (em comparação com o "hover") */

#menuNav li :active {
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
        background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
        background-color:#383838; /* Fallback */

       -moz-box-shadow: inset 0 1px 2px 2px #000;
       -webkit-box-shadow: inset 0 1px 2px 2px #000;
        box-shadow: inset 0 1px 2px 2px #000;
}

[Bergs 53]

o active e outros estados do link parece que foi abolido nos novos browsers ficando o hover, nao foi?

[Nícolas Luís Huber 14]

O modo como utilizou os seletores não iria atingir seu objetivo. Elaborei um CSS utilizando uma maneira mais estruturada, não ficou exatamente como o seu, mas podes configurar a partir deste. Segue o código:

 

style.css

* {
 padding: 0;
 margin: 0;
}
html {
 font-size: 100%;
}
body {
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;	
}
#menuBar {
 width: 960px;
 height: auto;
 margin: 0 auto;
}
#menuBar ul {
 list-style: none;
}
#menuBar ul li {
 display: inline;
}
#menuBar ul li a {
 text-decoration: none;
 color: #fff;
 border-right: 1px solid #5d5d5d;
 border-left: 1px solid #929292;
 border-bottom: 1px solid #575757;
 border-top: 1px solid #797979;
 float: left;
 text-shadow: 0 -1px 3px #202020;
 padding: 10px 20px;
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
 background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
 background-color: #5f5f5f; /* Fallback */
}
#menuBar ul li a:hover {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
 background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
 background-color:#383838; /* Fallback */
 -moz-box-shadow: inset 0 0 5px 5px #535353;
 -webkit-box-shadow: inset 0 0 5px 5px #535353;
 box-shadow: inset 0 0 5px 5px #535353;	
}
#menuBar ul li a:active {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
 background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
 background-color:#383838; /* Fallback */
 -moz-box-shadow: inset 0 1px 2px 2px #000;
 -webkit-box-shadow: inset 0 1px 2px 2px #000;
 box-shadow: inset 0 1px 2px 2px #000;	
}

 

menuBar.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>menuBar</title>
<link href="style.css" rel="stylesheet" media="all">
</head>

<body>
<nav id="menuBar">
<ul>
 <li><a href="#">Home_1</a></li>
 <li><a href="#">home_2</a></li>
 <li><a href="#">home_3</a></li>
 <li><a href="#">home_4</a></li>
</ul> 
</nav>
</body>
</html>

[William Bruno 1501]

:active é apenas o momento do click.

 

Enqnto o mouse ainda está "apertado". Para deixar ativo, veja:

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

[MOISÉS RODRIGUES 0]

Nícolas Luís, me perdoe por não ter respondido seu comentário de forma rápida, quero agradecer a sua atenção disposta sobre minha solicitação, estudei as suas linhas de códigos e consegui aplicar a função. Muito obrigado, forte abraço

 

William Bruno, Obrigado pela indicação parceiro, forte abraço.