[Jquery]Afficher masquer une DIV

Bonsoir,

Je me heurte à un petit soucis avec un menu déroulant sous Jquery.

Le menu est une div en display none. Cette div contient une autre div ainsi qu'une liste à puce. Je fais donc en sorte que lorsque je passe la souris sur un lien, le menu s'affiche. Jusqu'ici pas de soucis particulier.

Pour masquer la div, je demande à Jquery d'observer quand je ne suis plus sur la div qui contient mon sous menu et de la mettre en display none. Or lorsque je passe la souris sur ma liste le menu ce masque alors que pour moi je suis toujours dans la div de base.

Je vous met le code ce sera peut être plus clair.

Code HTMLdu lien qui déclenche l'apparition du menu au survol:

<ul>
  <li class="entreprises-top-menu">
    <a href="#">Entreprises</a>
  </li>
</ul>

J'ai omis volontairement le reste de la liste ils ne servent à rien dans cet exemple.

Code HTML de mon menu et de son contenu:

<div id="sub-menu-entreprise-container"> 

        <div id="entreprises-sub-menu-title"><a href="#">Entreprises</a></div>
        <ul>
            <li>Element 1</li>
            <li>Element 2</li>
            <li>Element 3</li>
        </ul>
    </div>

En enfin, le code JS pour afficher / masquer le menu:

$(function(){
  //Afficher
  $(".entreprises-top-menu a").mouseover(function(){
    $("#sub-menu-entreprise-container").css({
       'display': 'block'          
    });        
  });  

  //Masquer
  $("#sub-menu-entreprise-container").mouseout(function(){
    $("#sub-menu-entreprise-container").css({
      'display': 'none'        
    });        
  });  
})

Voilà, si quelqu'un voit où ce situe mon erreur, je suis preneur. Merci bien et bonne soirée.