menu a medias

[jositosov]

hola amigo esta vez el problema es el siguiente
tengo un menu en el css

Código:

ul.menuPrincipal {
	float:left;
	margin-top:10px;

}
ul.menuPrincipal li {
	display: list-item;
}
ul.menuPrincipal li a {
	display: list-item;
	color: Yellow;
	float:left;
	text-align: right;
	font-weight: bold;
	font-size: 16px;
	height: 16px;
	width: 135px;
	line-height: 10px;
}
ul.menuPrincipal li a:hover {
	display: list-item;
	color: Black;
	float:left;
	text-align: right;
	font-weight: bold;
	font-size: 16px;
	height: 16px;
	width: 135px;
	line-height: 10px;
}

<

Código HTML:

div id="botonera">
                  <h2>Menú Principal</h2>
                  <ul class="menuPrincipal">
                  <li><a href="../laempresa.html">La Empresa </a></li>
                  <li><a href="../servicios.html">Servicios </a></li>
                   <li><a href="../servicios.html">Productos </a></li>
   	   <li><a href="../servicios.html">Consultas </a></li>               
<li><a href="../servicios.html">Medio Ambiente </a></li> 
                        <li><a href="../servicios.html">Financiacion </a></li>  
                        <li><a href="../servicios.html">Contacto </a></li>   
                  </ul> 

el caso es que los botones me salen a la mitad me refiero que si el foton tiene 20 px de alto se me queda en 10 y el resto no se visualiza

gracias a todos

[hades87]

al li a, pone un display:block.