Ok, te ayudamos...
Mira este code... Es un ejemplo solamente.
Tomando el mismo que kseso? te dio.
Pero completo... analizalo.
Código HTML:
Ver originalli > span {position:relative; display:block; z-index:1; background:red; width:300px; margin-top:5px;}
li > div {display:none; position:absolute; background:green; height:120px;}
li > span:hover {z-index:5;}
li >span:hover ~ div {z-index:2; display:block;}
Saludos.
PD: Es imposible hacerlo si o si con "padre e hijo", aunque al padre le pongas un z-index "un millon", el hijo siempre estara por encima de el.
No le pierdas el amor, mejor aprende a ser "semantico" y la "teoria" del "funcionamiento" del CSS.
PD2: Imaginate... querer hacer un carro de gasolina que soporte 30 pasajeros con plastilina...
Si o si, si no, mejor ya no me dedico a nada....
Es ironico, no crees?
1.- Esa alternativa que te da kseso? y la cual use yo, es la definitiva.
2.- O bien como te dicen... usa JavaScript.
3.- O por ultimo... Todo saldria bien usando "padre e hijo" pero tendrias que quitar eso de "QUE APAREZCA ABAJO DEL PADRE", pues es imposible asi como lo planteas lograrlo.