Elemento con Posicion Absoluta se sale de su espacio

ColdFusion · #1 (**permalink**) 10/10/2011, 15:43

Hola tengo un problema que me esta matando desde hace 1 hora y media..
un problema que nunca antes habia tenido.

tengo un menu que al hacer mouseover deberia mostrar un submenu..

pero cuando lo hago, el enlace se sale de su ubicacion.

Código CSS:

Ver original.inferior,.inferior ul.control  {display:block;}
.inferior ul.control { float:right;}
.inferior ul.control li {display:block; float:left; margin-left:5px;}
.inferior ul.control li a {display:block;}
.inferior ul.control li.desplegable {position:relative;}
.inferior ul.control li.desplegable a.usuario {display:block; font-size:13px; padding:8px 10px 8px 38px; color:#FFF; text-decoration:none; font-weight:bold; text-shadow:1px 1px 1px #535353;}
.inferior ul.control li.desplegable a.usuario:hover {position:absolute; top:0; left:0; background-color:#3F64BC; color:#FFF; border-left:1px solid #264488;border-right:1px solid #264488; z-index:905; }
.inferior ul.control li.desplegable a.usuario img {position:absolute; top:0; left:0; border-right:1px solid #35405E}
.inferior ul.control li.desplegable a.usuario b{border-color:#000 transparent transparent transparent;border-width:5px;border-style:solid;position:relative;top:13px;left:5px;z-index:5}
.inferior ul.control li.desplegable ul{display:none; position:absolute;top:32px;right:0;padding:2px 0 3px 0; border:1px solid #264488; background-color:#3F64BC; width:200px; -moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px; z-index:500;}
.inferior ul.control li.desplegable ul li{display:block; float:none; border-top:1px dashed #5A80BE;}
.inferior ul.control li.desplegable ul li:first-child {border:none;}
.inferior ul.control li.desplegable ul li a{ display:block; font-weight:bold; text-decoration:none; color:#D9E3F4; border:none; text-shadow:none; padding:6px 6px 6px 8px;}
.inferior ul.control li.desplegable:hover ul{display:block}
.inferior ul.control li.desplegable ul a:hover,.inferior ul.control li.desplegable ul a.activo{background-color:#3A5EAF; color:#F3F9FE;}

Código HTML:

<div class="inferior">
<ul class="control">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li class="desplegable"><a class="usuario" href="#">Mi usuario</a>
<ul>
<li><a href="#">Primero</a></li>
<li><a href="#">Segundo</a></li>
<li><a href="#">Tercero</a></li>
</ul>
</li>
</ul>
</div>

como veran el problema es en el usuario:hover, Contiene la propiedad position absolute..

aqui dejo un html con el error, veanlo!

http://edwinmunguia.mavhn.com/positi...ute_error.html

segun yo esta correcto!.. pero sigue mostrando este error y no se su causa!.

rege · #2 (**permalink**) 12/10/2011, 13:21

Quitando el position absolute, top y left de:

.inferior ul.control li.desplegable a.usuario:hover {position:absolute; top:0; left:0;

funciona bien...

Tecna · #3 (**permalink**) 13/10/2011, 04:04

Buenas,

el problema viene porque .usuario en su estado normal no está posicionado y .usuario:hover lo está absolutamente. Al hacer hover cambia su posición a absolute con lo que lo sacas del flujo normal del documento y eso afecta a la posición del <ul> que se muestra en el hover y a la posición del propio enlace con lo que deja de estar activo el hover y de tener position absolute así que vuelve a su posición inicial y vuelta a empezar, por eso se produce ese parpadeo.

Para arreglarlo lo que tienes que hacer es posicionar absolutamente el enlace .usuario en su posición normal para que en el hover no cambie la referencia sobre su posición y no provoque el parpadeo. Tendrás que adaptar los valores de top y left para que mantenga la posición visual porque al ponerlo como absoluto se desplaza a la derecha.