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


