pasarle el hover a elemento desplegable sin que pierda el foco

[catpaw]

Hola forer@s!!

Veran tengo un div que al hacer hover sobre el despliega otro div que contiene un formulario para acceso al sistema, el efecto lo hago con jquery

Código Javascript:

jQuery('#acceso').hover(function(){
    jQuery('#acceso_area').toggle(200);
},function(){
    jQuery('#acceso_area').toggle(200);
});
 

Código HTML:

<div id="acceso" class="login">
	<img src="images/fondo/key.png" height="23px"/>
</div>
<div id="acceso_area" class="login_area">
       	<span class="title_acc">ACCEDER A EDICI&Oacute;N</span>
        <span>Usuario: <input type="text" id="user" name="user" size="5" /></span>
         <span>Contrase&ntilde;a: <input type="password" id="pass" name="pass" size="10" /></span>
         <input type="button" value="Enviar" onClick="logueo('user', 'pass', '1', 'acceso')" />
 <div class="clear"></div>
</div> 

mi problema es que le hago el hover a #acceso y se despliega #acceso_area pero cuando me quiero posicionar en el formulario para ingresar los datos (obviamente) al quitar el foco de #acceso el div que contiene los inputs (#acceso_area) se esconde

entonces necesito saber como "pasarle" el foco o el hover a #acceso_area hasta que quite el mouse de #acceso_area, para poder introducir los datos del login y enviarlos

quiero hacer algo como el login que esta aquí mismo en el foro

gracias!!