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; }