Foros del Web » Creando para Internet » CSS »

Problema con menú y div desplegable

Estas en el tema de Problema con menú y div desplegable en el foro de CSS en Foros del Web. Hola Estoy intentando hacer un menú horizontal y que al pasar el mouse sobre el item, aparezca una pequeña descripción. Todo con CSS, sin Javascript. ...
  #1 (permalink)  
Antiguo 14/11/2009, 18:03
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Problema con menú y div desplegable

Hola
Estoy intentando hacer un menú horizontal y que al pasar el mouse sobre el item, aparezca una pequeña descripción. Todo con CSS, sin Javascript. Así debería quedar:




Al pasar el mouse sobre el <li> obtengo el resultado que quiero.


Pero si salgo del <li> y manteniendo el puntero sobre el <div>, obtengo esto:


Es lo que no quiero que pase, quiero que siga manteniéndose en estado :hover el <li>.

Espero que me deje entender. El código que uso es éste:

Código HTML:
<ul class="ju-menu">
   <li>
      <a href="#"><span>Principal</span></a>
      <div>
         <h1>Titulo</h1>
         <p>Descripcion del menu. Aqui va el contenido</p>
      </div>
   </li>
   <li><a href="#"><span>Registro</span></a></li>
   <li><a href="#"><span>Empresa</span></a></li>
</ul> 
Código HTML:
.ju-menu li{
    float: left;
    margin-left: 5px;
    position: relative;
}

.ju-menu li a{
    background: url(images/menu-rounded-left.png) no-repeat left top;
    display: block;
    position: relative;
    height: 27px;
    _width: 15px;
    padding-left: 5px;
}

.ju-menu a span{
    background: url(images/menu-rounded-right.png) no-repeat right top;
    display: block;
    padding: 6px 5px 7px 0;
}

.ju-menu a:hover{
    background: url(images/menu-rounded-left-over.png) no-repeat left top;
    height: 34px;
}

.ju-menu a:hover span{
    color: #004070;
    background: url(images/menu-rounded-right-over.png) no-repeat right top;
    padding: 6px 5px 14px 0;
}

.ju-menu li div{
    color: #333;
    background: #dff3fe;
    height: 70px;
    position: relative;
    display: none;
}

.ju-menu li:hover div{
    display: block;
    position: absolute;
    padding: 5px;
    width: 150px;
}
  #2 (permalink)  
Antiguo 14/11/2009, 18:20
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Problema con menú y div desplegable

Ya encontré mi error :D
La solución es cambiar en el código CSS el a:hover, por li:hover.

Ahora el problema (como siempre) lo trae IE6, no funciona.
  #3 (permalink)  
Antiguo 15/11/2009, 10:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema con menú y div desplegable

hola jalex16
por si necesitas ayuda con eso fijate en:
http://www.araudi.net/Desplegables/m...plegable1.html

Digo, sobre los CC para el dichoso navegador.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 15/11/2009, 10:17
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Problema con menú y div desplegable

sí, fue ahi donde aprendí el truquito, pero IE6 lo dejaré para después (si es que me animo a soportarlo)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:35.