El menú desplegable IE7 aparece detrás de la imagen

He creado este menú desplegable de css3 que aparece detrás de la imagen cuando muevo el mouse sobre el menú desplegable y he intentado descifrarlo. Pero no puedo por mi vida. Cualquier ayuda es muy atractiva, puedes echarle un vistazo aquí.

Citando de este hilo

Z-index no es una medida absoluta. Es posible que un elemento con índice z: 1000 esté detrás de un elemento con índice z: 1 – siempre que los elementos respectivos pertenezcan a diferentes contextos de astackmiento.

Cuando especifica z-index, lo especifica en relación con otros elementos en el mismo contexto de astackmiento, y aunque el párrafo de la especificación CSS en Z-index dice que un nuevo contexto de astackmiento solo se crea para contenido posicionado con un índice z distinto de auto (lo que significa que su documento completo debe ser un único contexto de astackmiento), sí construyó un tramo posicionado: aparentemente IE interpreta esto como un nuevo contexto de astackmiento.

ACTUALIZAR

Agregue el siguiente CSS a su página

#header { position:relative; z-index: 2; } #content-wrap { position:relative; } 

Creo que cualquiera de estos explicará el problema y dará una solución:

Dale a “.nav” y “contenido” un índice z. Haga .nav más alto.