Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Chirlison

Problema no Hver no item de menu

Recommended Posts

Boa tarde a todos!

Pessoal, estou com um problema no menu do site e peço a ajuda de vocês para me ajudar a resolver.

 

Estou com o seguinte problema:

 

O item de menu quando no estado hover fica com a fonte em negrito, o problema é que todos os outros itens são empurrados para frente quando o link de menu fica com a fonte em negrito.

 

Por favor, alguém já passou pela situação de no estado hover do menu a fonte ficar em negrito e empurar todos os outros itens de menu para frente?

 

A fonte é para ficar em negrito mesmo, o problema é que dá um pequeno empurrão nos outros itens de menu.

 

Abaixo segue meu código:

/*Menu*/ 
#nav { width:100%; display:block; height:65px; z-index:9999; }
#nav ul { float:left; list-style:none; margin:0px; padding:0; margin-left:10px; }
#nav ul li { float:left; position:relative; margin-left:30px; margin-top:24px; }
#nav ul li a { display:block; text-decoration:none; font-family: 'latoregular'; font-size:14px; color:#fff;

Aqui é que o item de menu fica com a fonte em negrito e todos os outros itens permanecem com a fonte normal.

#nav ul li a:hover { font-family: 'latoblack'; color:#8071b3; font-size:14px;
#nav ul li ul li {
position:relative;
float:left;
left:-30px; 
text-align:center;
width:100%;
margin-top:0;
}
 

#nav ul li ul {
display:none;
position:absolute;
top:20px;
left:-35px;
line-height:40px;
background-color:#cbdb2a;
width:170%; 
}
 
#nav ul li:hover ul {
display:block;
}
 
#nav ul > li:hover > a { font-family: 'latoblack'; color:#8071b3; font-size:14px; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

Normal, haja visto que o link não possui largura predefinida, ele ficando em negrito (na verdade, outra família de fonte pelo seu código), irá necessitar um espaço maior. Logo, os itens ao redor serão influenciados.

 

Caso não queira que isto ocorra você pode:

- atribuir larguras definidas aos itens (<a>);

- ou trabalhar com sobras nos arredores, e assim, deixar q se movimente mais livremente (o que ficará, ainda feio, por fazer os demais itens -posteriores- se mexerem).

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado André Campos pela resposta.

Eu pensei que poderia existir uma outra solução a não ser ter que atribuir uma larguras definidas aos itens (<a>);

O menu é dinâmico, pois estou usando o wordpress e pode-se criar ou excluir item de menu a qualquer hora, então acho que colocar larguras definidas aos itens (<a>) pode não ser o ideal.

Mais uma vez, ,muito obrigado pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.