Menu border-top atrapalhando.

[Carlos Henrique A. 7]

Bom dia!

Estava criando um menu rapido aqui para fazer uns teste..

 

Eai quando eu adicionei um border-top de 4px ao passar o mouse em cima, o mesmo da uma deslocada para baixo acredito eu de 4px, como faço para que isso não aconteça?

 

Segue o código:

JsFiddle

 

Agradeço desde já a ajuda,

Abcs

 

Carlos Henrique.

[AndersonMamede 88]

Olá.

 

Você pode fazer assim:

header #menu li{
    /* deixa sempre com 4px, mas transparente para não ficar visível */
    border-top: 4px solid transparent;
}
 
header:hover #menu li:hover {
    /* aí você só muda a cor */
    border-top-color: orange;
}
 
#menu li a {
    /* e desconta os 4px da borda para ficar centralizado */
    padding: 23px 15px 27px 15px;
}

[L. Henrique 179]

Bom dia Carlos!

O border tem por padrão adicionar uma soma ao seu width ou height. Para fazer esse mesmo efeito, tente utilizar as pseudo-classes ::after ou ::before.

Veja um exemplo:

.menu::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: orange;
   display: none;
   /* ou */
   opacity: 0;
}

.menu:hover::before {
   display: block;
   /* ou */
   opacity: 1;
}

Como o position é absolute, ele tende a não somar os valores de height de ambos elementos.

Abraços!

[Carlos Henrique A. 7]

Obrigado galera! deu certo das duas formas..

[AndersonMamede 88]

Beleza! :P