CSS3 Transitions

[sergi_multimedia]

Hola de nuevo, quiero aplicar una transition en el menú de navegación, pero no se aplica como creo que se tendría que aplicar, el menú se vuelve loco cuando paso el cursor por encima, en el que se comporta mejor es en FireFox, pero en los otros es mucho peor.

Aquí tenéis la prueba:

http://s310876771.mialojamiento.es/

Código CSS:

nav ul li a {
    float: left;
    text-decoration: none;
    width: 120px;
    text-align: center;
    color: #fafafa;
    margin-left: 55px;
    text-shadow: 0px 0px 3px #969696;
    filter: dropshadow(color=#969696, offx=0, offy=0);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;   
}
 

Alguna sugerencia para que funcione correctamente?

Un saludo

[kseso?]

en nav ul li a:hover declare sólo aquellas propiedades que van a cambiar respecto a las declaradas para nav ul li a

Creo que si retira la altura en el :hover ese efecto comportamiento desaparecerá. La razón es que en transition declara /all/ esto es, quese apliquen a todas las propiedades:valores que cambian.

Quizás le convenga añadir a nav ul li a display: block.

Disclaimer: Ni he podido analizar su código con un mínimo de detenimiento ni probar lo que le propongo. Razón: no dispongo de chrome en estos momentos.