Pues todo está explicado en el primer mensaje que te dejé.
Inicialmente lo que tenías mal era que en tu transición estaba algo así:
Código CSS:
Ver original-moz-transition: height 0.6s ease-in-out, background-color 0.6s;
En ese caso sólo servía para un navegador, por esta razón debes activar el mismo efecto para cada navegador con las siguientes propiedades...
Código CSS:
Ver original-moz-transition:0.1s;
-ms-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
Igualmente esta regla, como la tenías, sólo iba a modificar el height, y como ves esta propiedad no está establecida en la regla:
Código CSS:
Ver original.menu li:hover
{
background:red;
-moz-transition: height 0.6s ease-in-out, background-color 0.6s;
}
En el caso de la transición de los colores era el mismo error.
Ahora para hacer el efecto de desplegar el menú como te dije, primero hay que especificar un alto al menú, en este caso lo apliqué a la regla: ".menu ul li ul" con un height:0px y visibility: hidden;.
luego la regla que lo hace visible es esta: ".menu ul li:hover ul", para esta el efecto de aparecer se hace con visibility: visible; y ahora va a tener una altura de 250px, o sea height:250px; y por último un overflow:hidden para que el contenido no se salga y la lista lo haga visible a medida que va apareciendo el menú, por último haces la transición:
Código CSS:
Ver original-moz-transition: 0.4s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition:0.5s;
Eso es todo.
Creo que además tenías una etiqueta ul sin cerrar, y otro error es que la etiqueta li debe contener los links y no los links a la etiqueta li.