Por lo que veo la barra de navegacion con css esta mal encarada, hay varias cosas que faltan y otras que sobran, si bien hay varias maneras de hacer estas barras de navegacion con css y html, te voy a pasar un ejemplo y despues vos podes usarlo en tu pagina cambiendo obviamente las medidas y los colores de la barra, espero que te sirva, Saludos.
Ejemplo css:
Código:
#lista{
height:100px;
width:700px;
background-color:#000;
}
#lista ul{
list-style-type:none;
margin:0;
padding:0;
font: 12px Verdana, Geneva, sans-serif;
text-align:center;
line-height:30px;
width:450px;
float:left;
margin-left:120px;
margin-top:30px;
}
#lista li{
float:left;
margin-left:5px;
width:100px;
height:30px;
border:1px dashed #FF0;
}
#lista a{
text-decoration:none;
color:#000;
font-weight:bold;
}
#lista a:link{
display:block;
width:100px;
height:30px;
background-color:#ff0066;
}
#lista a:visited{
background-color:red;
width:100px;
height:30px;
display:block;
}
#lista a:hover{
background-color:#ff6666;
width:100px;
height:30px;
display:block;
}
#lista a:active{
background-color:#f60;
width:100px;
height:30px;
display:block;
}
El html:
Código:
<div id="lista">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICIOS</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</div>
Espero que te sirva, te repito, las medidas las vas cambiando y se deberia ver igual en todos los navegadores, siempre utilizo esta estructura par realizar barras horizontales.-