Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
estava com o menu funcionando perfeitamente sem a utilização de uma imagem na lista na hora do hover, mas ai eu quis incrementar fiz a imagem certinha ta com o mesmo tamanho do "display block" mas qdo eu passo o mouse para aparecer a imagem no hover a palavra do menu "desce" não ficando mais na mesma centralização da imagem ou então do menu de antes sem o hover.
vou tentar expressar por imagem pq ainda não upei o site todo.
menu sem o mouse, não funcionando hover:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img151.imagevenue.com/loc355/th_18490_sem_hover_122_355lo.jpg&key=4a08a02c281056047978ef81b2aaae69d49861041895efba6d06e02e8de63b6c" alt="Imagem Postada" />
menu com o hover utilizando a imagem (v) ativado:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img157.imagevenue.com/loc372/th_18493_hover_122_372lo.jpg&key=dbdcba16a3c6693ae8b85925b486d2de2ac69c32553fb40d1797d664ee3a06da" alt="Imagem Postada" />
menu com o hover sem imagem ativado:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img250.imagevenue.com/loc478/th_18764_normal_122_478lo.jpg&key=dae10ac8d3a617d507acee1dca080b4ebaa0d5cc517c1cb79c970a1c131cfc3d" alt="Imagem Postada" />
codigo do meu menu
/ Menu Lateral/
#menu_lateral {
float: left;
width: 190px;
padding: 30px 0px 0 66px;
}#menu_lateral ul {
margin: 0;
padding: 0;
list-style: none;
}#menu_lateral li {
padding: 10px;
}#menu_lateral li ul {
padding-bottom: 30px;
}#menu_lateral li li {
line-height: 30px;
border-bottom: 1px dashed #D2D4C9;
text-indent: 10px;
}#menu_lateral h2 {
letter-spacing: -.5px;
color: #000000;
font-size: 14px;
font-weight: bold;
}#menu_lateral a {
color: #787878;
border: none;
font-size: 11px;
text-decoration: none;
}#menu_lateral a:hover {
text-decoration: none;
color: #FFFFFF;
list-style: url(images/v_menu.jpg);
line-height: 30px;
background: #0964AA;
display: block;
}fiz essas mudanças sugeridas mas mesmo assim continua o problema
html:
<div id="menu_lateral">
<ul>
<li>
<h2>Menu</h2>
<ul>
<li><a href="#">Página Principal</a></li>
<li><a href="#">Licitações</a></li>
<li><a href="#">Plano Diretor</a></li>
<li><a href="#">Prestação de Contas</a></li>
<li><a href="#">Leis Municipais</a></li>
<li><a href="#">Leis Estaduais</a></li>
<li><a href="#">Leis Federais</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Webmail</a></li>
</ul>
</li>
</ul>
</div>upei o menu
pode ser visto em http://www.webertini.com.br/teste/menu.html
Utilize background-position. Algo assim:
#menu_lateral a:hover {
text-decoration: none;
color: #FFFFFF;
background: #0964AA url('images/v_menu.jpg') no-repeat center left;
}eu coloquei assim como background, mas o V ficou em cima do menu...
aumentei a propriedade text-indent pra 20px e deu certo
obrigado a todos
Fica mais dificil, se não pudermos testar.. mas de começo, não defina coisas finas pro estado hover, q não tenha definido pro normal.
#menu_lateral a {
#menu_lateral a:hover {
}Poste o HTML, e se possível a imagem então, ou um link com apenas o menu, pois assim podemos ver e sugerir melhor as mudanças. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif