Problema con menú y div desplegable

[jalex16]

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