Si lo que deseas es que el submenú aparezca de una altura menor a una altura mayor con una transición (para dar el efecto de abrir), entonces deberías tener una altura inicial para el submenú a partir de donde comenzará la transición y luego entonces una altura final que vendrá dada por el submenú con la pseudoclase :hover. De esta forma ya tienes el efecto de desplegar, ahora para hacer la transición tendrás que ponerle al :hover además de sus parámetros ya especificados una propiedad de transición:
que sería de esta forma:
Código CSS:
Ver original-moz-transition:0.1s;
-ms-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
El tiempo está dado en segundos y será el tiempo total que durará la transición desde el momento en que el botón esté hover hasta el tamaño final.
Si deseas que cuando se quite el puntero el menú se esconda de la misma forma, tendrías que poner esas mismas propiedades pero
Para más efectos, podrías consultar
CSS transitions.