Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Peguei esse modelo de menu vertical http://www.freecsstemplates.org/preview/terrafirma2
só que eu quero no meu menu, qdo eu passar com o mouse fazer aquele "display: block" (mais ou menos como ta o home)
só que nas modificações que fiz eu consegui inserir o block mas as palavras do meu "andam" pra frente
eu acho q ele ta aplicando duas vezes o padding por isso ta indo pra frente o texto, mas não to achando como deixar fixo o texto e colocar o block nas laterais.
olhem o código
#menu {
height: 76px;
background: url(images/bg04.jpg) no-repeat 0 -211px;
}
#menu ul {
height: 67px;
margin: 0 25px;
padding: 9px 0 0 14px;
background: url(images/bg05.jpg);
list-style: none;
line-height: 1;
}
#menu li {
float: left;
height: 35px;
padding: 15px 20px 0 20px;
}
#menu li.active {
background: url(images/bg06.jpg) no-repeat;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
}
#menu a:hover {
padding: 10px;
background-color:#33FF00;
text-decoration: underline;
}>
só que eu quero no meu menu, qdo eu passar com o mouse fazer aquele "display: block" (mais ou menos como ta o home)
só que nas modificações que fiz eu consegui inserir o block mas as palavras do meu "andam" pra frente
eu acho q ele ta aplicando duas vezes o padding por isso ta indo pra frente o texto, mas não to achando como deixar fixo o texto e colocar o block nas laterais.
olhem o código
#menu li {
float: left;
height: 35px;
padding: 15px 20px 0 20px;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
}
#menu a:hover {
padding: 10px;
background-color:#33FF00;
text-decoration: underline;
}
Olha, em nenhuma parte desse código foi definido os links, seja :hover ou não, como sendo elemento de bloco. A não ser que tenha sido definido antes desse código.
Se você quiser que os links desse menu sejam nível de bloco e com padding sem "andar" você deve fazer assim:
#menu a {
text-transform: lowercase;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
padding:10px; /**quer que seja um padding geral ou só para a esquerda?*/
display:block;
}
#menu a:hover {
background-color:#33FF00;
text-decoration: underline;
}bom o q eu fiz ta aqui:
http://www.webertini.com.br/lady/
ao passar o mouse em cima do meu ele "anda" pra frente, eu quero q ele fique fixo e a cor de fundo preencha o espaço referente ao link, tipo o home
André, testa o código abaixo:
#menu li {
float: left;
height: 35px;
padding: 15px 0 0;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
padding:13px 20px;
}
#menu a:hover {
background-color:#33FF00;
text-decoration: underline;
}
Agora vai funcionar. O que eu fiz foi tirar o padding do li e adicioná-lo ao link. Nesse caso o tamanho do link normal e :hover ficará igual, da maneira apropriada.
Tudo certo?
poxa cara brigadão, era isso mesmo que eu queria
http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
Andrézone's, eu não entendi bem o que você quer?
Podes tentar explicar melhor?
Ou postar um link com o que você já fez?