En realidad
z-index
lo puedes usar en cualquier elemento cuya posición no sea estática, que es la que por defecto tienen todos los elementos; así que una posición relativa también te servirá.
Igual necesitas cambiar más de una cosilla para que funcione bien cuando cambies a posición relativa los elementos del menú.
Hice una pequeña prueba cambiando lo que te dije y algunas otras cosas:
http://codepen.io/pzin/pen/BAufo
No sé si está perfecto en cuanto al tema del movimiento, usé las medidas que tenías tú puestas para usar
translateY()
, que como verás, en lugar de usarlo al desplegar, realmente lo usé cuando el menú está
cerrado. Luego al desplegar se vuelve
translateY(0)
.
A tener en cuenta, que en CodePen usan
prefixfree para el tema de los prefijos propietarios.