Menu Horizontal distribuir mismo tamaño

[fede5426]

Para que tengan el mismo ancho tenes que asignar ese width a los elementos <li>.

Lo del hover, si indicas que al pasar el cursor por encima se le aplique un borde de 2px, es normal que los demás elementos se muevan, la solución es aplicarle un borde transparente en su estado normal..

Te dejo un ejemplo:

Código HTML:

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Tienda</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>
 

Código CSS:

nav{
    background-color:#1c4781;
    width:1000px;
    margin:0 auto;
    text-align:center;
    padding:2em;
}
 
nav ul{
    list-style:none;
}
 
nav ul li{
    display:inline-block;
    width:100px;
    padding:.5em 0;
    margin:.5em;
}
 
nav ul li a{
    color:#fff;
    font-family: Trebuchet Ms;
    text-decoration:none;
    border:2px solid transparent;
    display:block;
    padding:.5em;
}
 
nav ul li a:hover{
    border:2px solid #fff;
}
 

http://codepen.io/fede5426/pen/VLQWjO

Saludos