Probando en últimas versiones de FF y Chrome, no importa cuantas veces refresque siempre aparece bien.
Sin embargo en IE no, siempre aparecen uno encima del otro. Y no sólo eso, sino que los demás estilos no se aplican tampoco (como fuentes, list-style, etc).
Yo puedo ver varios errores de entrada, como ser esto:
Código HTML:
Ver original<a href="productos.html"><li class="boton" id="boton">Productos
</li></a>
Ese tipo de enmarcado no es válido. Ni siquiera en HTML5. El <a> no puede ser hijo directo del <ul>. Probá cambiando eso a:
Código HTML:
Ver original<li class="boton" id="boton"><a href="productos.html">Productos
</a></li>
Además de eso, el id
boton se repite en todos los botones.
Otros errores, en el CSS:
padding-right : 0 auto 0 auto Estás usando la forma abreviada para
padding, donde cada valor corresponde a top, right, bottom y left.
padding-right admite un solo valor.
vertical-align : center No existe. es:
vertical-align : middle
En fin, yo creo que corrigiendo el primer error, el del enmarcado, puede que se solucione.