Problema con menú desplegable en referencia al elemento padre

No se porqué el menú no se despliega saliendo del elemento padre:

http://lasombradetusombrero.com/pruebas/escuelainfantil/precio.html

Si os poneis sobre menú vereis que aparece donde le da la gana (bueno left: 100px; top: 195px😉 pero no toma la referencia del elemento que lo contiene sino de la esquina del navegador y no se porque....

tengo puesto en el elemento que lo contiene:

.elemento {
position: relative;
}

y en el desplegable

.desplegable {
position: absolute;

}

que es como creía que habia que hacerlo.... ¿podeis echarme una mano?

Gracias

El problema es el left, ponele 220 o sacale el left, y en position dejalo en fixed o si lo sacas se baja con el contenido.

Hola,

Comentarte un par de cosas.

Sobra:

onmouseover="despliega(0)" onmouseout="pliega(0)"

Dado que estás usando el hover.

Respecto a tu problema solo debes sacar esto:

De .desplegable { quítale left: 100px; top: 195px; y quedara correctamente. Ya que queda alineado abajo.

Gracias a todos.

Si quieto el left y el top, como os decía, toma de referencia el marco del navegador y lo pone ahí, y yo lo quiero debajo de Menú.

No lo estoy haciendo con hover sino con javascript. Se que ya no se lleva pero es para una práctica y tiene que ser así.

Gracias

- - - Actualizado - - -

Acabo de solucionarlo.... tenía el position:absolute en el <li> que contenía el <ul>que tenía el relative. Lo he puesto en en <ul> que conetnía al <li> y listo.

Gracias por vuestra ayuda.