Se cae el menú, no entiendo por que

[alvarols]

Tengo un problema con el CSS, y es que el menú aparece caído, no entiendo por qué, aquí les muestro un pantallazo.



Este es el código html del menú:

Código:

<div id="contright">
            	<ul>
                	<li class="somos"><a href="somos.php"></a></li>
                    <li class="caff"><a href="caff.php"></a></li>
                    <li class="exito"><a href="exito.php"></a></li>
                    <li class="contacto"><a href="contacto.php"></a></li>
                </ul>
            </div>

Y este es el CSS

Código:

#contright{
	display:block;
	float:right;
	height:67px;
	margin:0px;
	padding:0px;
}

#contright ul{
	position:relative;
	width:624px;
	height:67px;
	clear:both;	
}

#contright ul li{
	display:inline;
}

#contright ul li.somos a{
width:156px;
height:67px;
background:url(images/somos.jpg);
float:left;
}

#contright ul li.somos a:hover{
display:block;
width:156px;
height:67px;
background:url(images/somos.jpg);
position:relative;
background-position:0px -59px;
}

#contright ul li.caff a{
width:156px;
height:67px;
background:url(images/caff.jpg);
float:left;
}

#contright ul li.caff a:hover{
display:block;
width:156px;
height:67px;
background:url(images/caff.jpg);
position:relative;
background-position:0px -59px;
}

#contright ul li.exito a{
width:156px;
height:67px;
background:url(images/exito.jpg);
float:left;
}

#contright ul li.exito a:hover{
display:block;
width:156px;
height:67px;
background:url(images/exito.jpg);
position:relative;
background-position:0px -59px;
}

#contright ul li.contacto a{
width:156px;
height:67px;
background:url(images/contacto.jpg);
float:left;
}

#contright ul li.contacto a:hover{
display:block;
width:156px;
height:67px;
background:url(images/contacto.jpg);
position:relative;
background-position:0px -59px;
}

Ojalá me pudieran ayudar, se los agradecería mucho