El menú desplegable de CSS solo muestra ul y no elementos en ie9 - html, css, desplegable-menu, internet-explorer-9

Aquí está mi jsfiddle actual para la barra de navegación. http://jsfiddle.net/EPh6j/28/

Por favor estire la barra para que sea una sola línea, de lo contrario obtendrá resultados mixtos.

El problema solo ocurre en ie9 hasta donde sé. Lo que sucede es que cuando se desplaza sobre uno de los enlaces principales, se despliega el menú desplegable. Sin embargo, tan pronto como el menú desplegable pasa a la parte inferior del menú principal, se vuelve invisible. Lo que es aún más confuso es que el borde ul para el submenú muestra pero no los elementos.

Aquí hay un ejemplo de lo que quiero decir: Observe cómo es visible y luego desaparece más allá del fondo. http://i.imgur.com/jXsoE.png

Hice lo anterior cuando estaba tratando de averiguarmi problema para empezar En el jsfiddle, se mueve completamente hacia abajo como debería y por lo tanto está completamente en blanco. Estoy completamente perplejo al hacer que éste funcione.

Mi CSS:

.menu li li {
float:none;
position: relative;
}

.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}

.menu li:hover > ul {
top:100%;
visibility:visible ;
}

Sugerencias?

Respuestas

Sospeché un problema del índice z, así que los quité de su violín. Parece haberlo arreglado.

Por cierto, "patrocinios". ;-)