menu horizontal css + html simples

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>