5min-Ayuda con z-index

[moises_13__35]

Os he mostrado un imagen de lo que quiero conseguir.
Os he mostrado el HTML y el CSS.
Os he mostrado un ejemplo de la web.
---Os he mostrado un ejemplo cuando son hermanos que si me funciona. Pero no me gusta el resultado.
---Os he mostrado un ejemplo cuando son padre e hijo que no me funciona.
Y pedia que me ayudaseis a conseguir el aspecto de la imagen, siendo estos PADRE e HIJO.
Aunque no hayais sabido ayudarme enteramente a conseguir lo que pedia (linea de arriba) kseso? me hizo prender la bombilla al poner la siguiente fila de código li > span:hover {z-index: 5;}.
Ahora quisiera que me respondieseis a una cosa. ¿Se puede en Mozilla Firefox poner un div hijo por detrás de su div padre? Si es asi ponedme un ejemplo claro y completo.
A continuacion dejo dos paginas web.
La 1ª http://galeon.com/prueba-moi/Untitled-4.html similar al ejemplo de kseso? en la que se utiliza tres etiquetas li, span y div. que funciona en Chrome, Safari y Firefox.
La 2ª http://galeon.com/prueba-moi/Untitled-6.html con dos etiquetas div padre y div hijo funciona correctamente en Chrome y Safari, pero no se porque Firefox no reconoce el z-index muchísimo menor del hijo respecto al padre.
Tenéis ahí los dos ejemplos creo que todos sabemos mirar su código fuente, así que ayudadme por favor que estoy empezando a perder el amor que sentía a la programación al ver que hay que programar 5 paginas diferentes una para cada navegador.