Menu com :before

[Je4n 0]

Bom, é um pouco novo para mim usar esse código css, e então ocorreu o seguinte problema: O Efeito está funcionando, mas não corretamente. Ele só funciona no primeiro <li> do menu, mesmo ativando as hovers seguintes, o efeito permanece apenas na primeira.

 

Imagem ilustrativa do problema:

 

Aqui está meu css:

 

/* Navegador */
.menu-navegador {
float: right;
margin-top:0px;
overflow:hidden;
z-index:100;
}
.menu-navegador ul {
text-decoration:none;
}
 
.menu-navegador li {
float: left;
z-index: 0;
padding: 0 18px;
width: 100%;
height: 41px;
line-height: 41px;
border-bottom: none;
margin-right: 5px;
background: #F8F8F8;
border-bottom: 1px solid #CAC9C9;
cursor: pointer;
cursor: hand;
color: #585858 !important;
font-size:13px;
font-weight: bold;
text-decoration:none;
} 
 
.menu-navegador li:hover {
background-color: rgba(255,255,255,.15);
} 
 
.menu-navegador li.ativo {
background-color: rgba(255,255,255,.15);
color: #585858;
border-bottom: 0;
}
 
.menu-navegador li:hover:before {
display: none;
content: "";
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
height: 39px;
width: 3px;
max-width: 3px;
overflow: hidden;
background-color: #017FD3;
transition: background .5s ease-in-out; 
}
 
.menu-navegador li:hover:before {
display: block;
transition: background .5s ease-in-out;
}

[Marlon Pacheco 132]

Cara, acho que tu poderia organizar melhor esse teu CSS aí, o li tem 2 propriedades cursor.

Mas, vamos lá.

Copiei teu CSS e tentei chegar no mesmo problema, mas não consegui. Se tivesse o html ficava mais fácil.

Mesmo assim, dá uma olhada no exemplo que eu fiz (http://codepen.io/marlonlp/pen/xLfEr).

[Je4n 0]

Eu me lembro de ter colocado o HTML o.O. Sobre o CSS, não prestei atenção. Eu gostei do menu, mas a minha intenção é que a borda tenha efeito de transição, e isso só é possível com :before. :s

 

 

<ul class="menu-navegador">
<li><a href="#">Início</a><span></span></li>
<li><a href="#">Sobre</a><span></span></li>
<li><a href="#">Contato</a><span></span></li>
</ul>

[Marlon Pacheco 132]

Mas cara, tem transição na borda também. Olha lá no mesmo link.

Atualizei o html com o que tu me mandou.

[Je4n 0]

Não era bem o efeito de transição que queria (estava pensando em algo como o do Twitter por exemplo) mas está ótimo por enquanto, muito obrigado. :D

[Je4n 0]

Bom, consegui resolver. O Problema com a :before, é que no .li eu não tinha colocado position:relative;

 

Agradeço a ajuda, o tópico foi resolvido. :)

[andersonseifert 10]

Marque como resolvido amigo.