menu css desalinhado

[furiax.]

estou desenvolvendo um site, e to com um problema no menu.

o hover ta desalinhado, fica embaixo... segue embaixo as imagens e códigos.

imagem do menu como está (errado)

como deveria ficar

HTML

 <div id="bg_menu">
<ul id="nav">
 <li class="ativo"><a href="index.html">SEEDORF</a></li>
 <li><a href="#">NEWS</a></li>
 <li><a href="#">ON THE ROAD</a></li>
 <li><a href="#">FOUNDATION</a></li>
  <li><a href="#">MULTIMEDIA</a></li>
   <li><a href="#">CONTACTS</a></li>
</ul>
</div> 

CSS

#bg_menu{
background:url(images/bg_menu.png);

height:60px;
float:left;
 width: 100%;

}

ul#nav li{

	display:inline;
	float:left;
	margin-left: 0 auto;
	text-align:center;
	display:block;
}

ul#nav li a{
	margin-top:24px;
	display:block;
	float:left;
	text-decoration:none;
margin-left: 20px;
font-family:"Microsoft Tai Le";
font-size:12px;
color:white;
opacity: 0.65;
width:96px;
height:35px;

}

ul#nav li a:hover{
	background:url(images/menu_hover.png);
color:#ffc600;	
opacity: 0.90;
}

obrigado!

[DiF]

Tem algumas coisas que me chamou a atenção..

no hover do link você pôs uma imagem, veja se a imagem está no tamanho correto.

Vejo no seu menu que usas dois atributos que fazem a mesma coisa.. se você usar display inline, não use o float left, apenas dê uma margem direita para separar os textos. Se você utilizar float left para deixar os links lado a lado, não use display inline.. pode ser isso que esteja dando conflito.

Tente reescrever seu css com as mudanças que mencionei para ver se funciona.

[furiax.]

então, fiz essas mudanças e não mudou absolutamente nada

segue o código

#bg_menu{
background:url(images/bg_menu.png);

height:60px;
float:left;
 width: 100%;

}

ul#nav li{
	dislpay:inline;
	text-align:center;
	display:block;
}

ul#nav li a{
	margin-top:24px;
	display:block;
	float:left;
	text-decoration:none;
margin-left: 20px;
font-family:"Microsoft Tai Le";
font-size:12px;
color:white;
opacity: 0.65;
width:96px;
height:35px;

}

ul#nav li a:hover{
	background:url(images/menu_hover.png);
color:#ffc600;	
opacity: 0.90;
}

alguém...?

up