menu horizontal css + html simples

[Joao Marcos_173092 0]

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>

[Maujor 144]

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

[Joao Marcos_173092 0]

Olá, obrigado pela dica.

más nao quero por imagem!

quero por cores.

obrigado!

[Lucas AG 1]

no lugar das imagens vc que por cores?

[reebr 94]

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.