Hugo: No lo he visto en detalle pero siempre que al padre le pongas position:relative... a los hijos les puedes poner position:absolute, y las coordenadas que le des lo colocarán siempre con respecto al padre.
Resumiendo: Padre: position: relative; Hijo: position:absolute; Si el hijo lleva top: 0px; left:0px; Se colocará en las coordenadas 0,0 con respecto al padre, esté donde esté en la página hugo sierra escribió: > Gracias Jaume, ya me conocía estos sitios. Pero muchas gracias. > > A ver, otra cosa. El menú es horizontal, que en el cuerpo del mensaje decía > lo contrario, jeje. > > Y bueno, llevará javascript. Pero me preocupa que con la posición absoluta > dependo del contenido anterior. Yo lo que quiero es que la lista anidada > siempre se coloque debajo de la padre, independientemente de lo que haya > antes. > > > > > >> Date: Tue, 16 Oct 2007 16:16:59 +0200 >> From: [EMAIL PROTECTED] >> To: ovillo@lists.ovillo.org >> Subject: Re: [Ovillo] menú de listas anidadas en horizontal >> >> Hola hugo, no se si entiendo todo bien, quieres un menu se desplieble solo >> con css "jodidillo" pero mira a ver estos links que tenia a mano >> ://www.htmldog.com/articles/suckerfish/example/<http://www.htmldog.com/articles/suckerfish/example/> >> <http://www.htmldog.com/articles/suckerfish/example/><http://www.htmldog.com/articles/suckerfish/example/> >> http://www.cssplay.co.uk/menus/flyout5.html >> solo has de estudiar un poco el codigo y asentarlo a tu gusto. >> >> Jaume >> >> 2007/10/16, hugo sierra <[EMAIL PROTECTED]>: >> >>> Hola a todos: >>> >>> Estoy haciendo un menú vertical con 2 niveles. Por lo tanto estoy usando >>> listas anidadas. >>> Pero no consigo controlar la posición de la lista-hija. La posición es >>> absoluta y en cuanto falta o se añade algún elemento en algún componente >>> anterior, se descoloca. >>> >>> Yo lo que quiero es que siempre esté ahí. >>> >>> Si no le pongo position:absolute; más o menos se queda bien pero el <li> >>> padre se hace tan grande como la ul que anida. >>> >>> Bueno este es el CSS para ver si me podeis echar una mano: >>> >>> #pestanias { >>> background-image: url(fondos/pestanias.gif); >>> background-repeat: repeat-x; >>> background-position: left top; >>> height: 58px; >>> width: auto; >>> } >>> >>> #pestanias ul{ >>> margin:0; >>> list-style:none; >>> padding: 8px 10px 0px 10px; >>> } >>> >>> #pestanias ul li{ >>> display:inline; >>> float: left; >>> margin: 0; >>> >>> } >>> >>> #pestanias ul li a{ >>> font-weight: bold; >>> color: #3F3E41; >>> font-size: 0.9em; >>> background-color: #E0DFDF; >>> background-image: url(fondos/bot_menu.gif); >>> background-repeat: repeat-x; >>> background-position: left top; >>> display: block; >>> padding: 5px 7px; >>> border-top: 1px solid #696969; >>> border-right:1px solid #696969; >>> border-left: 1px solid #696969; >>> } >>> #pestanias ul li a:hover{ >>> background-image: url(fondos/bot_menu_sobre.gif); >>> background-repeat: repeat-x; >>> background-position: left top; >>> } >>> #pestanias ul li ul{ >>> background:none; >>> list-style:none; >>> margin-top:0px; >>> position: absolute; >>> left: 3px; >>> top:172px!important; >>> top:180px; >>> width: auto; >>> padding-top:15px; >>> >>> } >>> >>> #pestanias ul li ul li{ >>> padding: 0px 2px; >>> } >>> #pestanias ul li ul li a.activo{ >>> border:none; >>> float: left; >>> display: inline; >>> background-color:transparent; >>> background-image: url(fondos/bullet_submenu.gif); >>> background-repeat: no-repeat; >>> background-position: 0px 9px; >>> padding-left: 11px; >>> >>> } >>> #pestanias ul li ul li a:hover{ >>> color: #A4020B; >>> background-image: url(fondos/bullet_submenu2.gif); >>> background-repeat: no-repeat; >>> background-position: 0px 9px; >>> padding-left: 11px; >>> } >>> >>> >>> #pestanias ul li a.activo { >>> background-image: url(fondos/bot_menu_sobre.gif); >>> background-repeat: repeat-x; >>> background-position: left top; >>> } >>> >>> >>> Muchísimas gracias de antemano. >>> >>> >>> >>> _________________________________________________________________ >>> Express yourself instantly with MSN Messenger! Download today it's FREE! >>> http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ >>> _______________________________________________ >>> Lista de distribución Ovillo >>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >>> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >>> http://lists.ovillo.org/mailman/listinfo/ovillo >>> >>> >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > _________________________________________________________________ > Express yourself instantly with MSN Messenger! Download today it's FREE! > http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
