Joao Marcos_173092 0 Denunciar post Postado Março 25, 2014 Olá pessoal, sou basico em html e css, estou tentando fazer um menu horizontal, contendo uma imagem pequena e um texto abaixo, e que possa fazer rollover. Más não tou conseguindo, o rollover que faço fica destorcido. por favor me ajudem!!! Desde já muito Obrigado. CSS: /* MENU Horizontal DOIS*/ #menu { width: 100%; background:#48887B; } #dentro_menu { margin: 0 auto; height: 100px; width: 950px; } .menuhorizontaldois { Width: auto; } .menuhorizontaldois ul{ list-style: none; } .menuhorizontaldois li{ display: inline; width: auto; height:42px; padding-right:45px; padding-left:22px; padding-top:10px; float: left; } .menuhorizontaldois a{ display: block; text-decoration: none; padding: ; background-color:; color:#FFF; font-family:"Times New Roman", Times, serif; font-size: 22px; } .menuhorizontaldois :hover{ background-color:#000; text-decoration: none; color:#CCC; height:42px; } /*FIM MENU HORIZONTAL DOIS */ HTML: <div id="menu"> <div id="dentro_menu"> <ul class="menuhorizontaldois"> <li><center><img src="img/icon/home.png"><a href="#">Pagina Principal</a></center></li> <li><center><img src="img/icon/quemsonos.png"><a href="#">Quem Somos</a></center></li> <li><center><img src="img/icon/localizacao.png"><a href="#">Localização</a></center></li> <li><center><img src="img/icon/consulta.png"><a href="#">Consulta de CA</a></center></li> <li><center><img src="img/icon/contato.png"><a href="#">Contato</a></center></li> </ul> </div> Compartilhar este post Link para o post Compartilhar em outros sites
Maujor 144 Denunciar post Postado Março 25, 2014 Você quer efeito rollover? Use imagem de fundo e não na marcação.Veja esse tutorial: http://www.maujor.com/tutorial/css-sprites.php Compartilhar este post Link para o post Compartilhar em outros sites
Joao Marcos_173092 0 Denunciar post Postado Março 26, 2014 Olá, obrigado pela dica. más nao quero por imagem! quero por cores. obrigado! Compartilhar este post Link para o post Compartilhar em outros sites
Lucas AG 1 Denunciar post Postado Março 26, 2014 no lugar das imagens vc que por cores? Compartilhar este post Link para o post Compartilhar em outros sites
reebr 94 Denunciar post Postado Março 27, 2014 Se quer fazer somente com HTML e CSS, faça isto: li:nth-child(1):hover { background: #ff3333; } li:nth-child(2):hover { background: #00cc66; } li:nth-child(3):hover { background: #6633ff; } li:nth-child(4):hover { background: #ffcc00; } li:nth-child(5):hover { background: #00cccc; } Para as cores que quiser. Compartilhar este post Link para o post Compartilhar em outros sites