[jQuery] Style dynamic menu

[jQuery] Style dynamic menu

To start, I can't speak english, but I will try to make me understand.

So, this is the code :

index.html
<body>
       <div class="config" id="conf-1">
                        <div class="config_icon"></div>
                        <div class="config_nom">Config</div>     
       </div>
</body>


design.css
ul
{
   padding : 0;
   margin : 0;
   list-style-type : none;
}

.config
{
   float : right;
   text-align : center;
}

.config_icon
{
   height : 36px;
   width : 36px;
   
   background-image : url(conf.png);
   background-position : top right;
   background-repeat : no-repeat;
}

.config .config_nom
{
   display : none;
   
   height : 36px;
   width : 150px;
   
   margin-left : -145px;
   margin-top : -36px;
   
}


jquery.js
$(document).ready(function(){

   $('.config').mouseover(function()
   {
      $(this).children(".config_nom").show('slow');
   });
   $('.config').mouseout(function()
   {
      $(this).children(".config_nom").hide('slow');
   });


});



To see the problem, I put this code on my webSite : link

This is my problem :

When the mouse over in the "config" class, the "config_nom" class
appear but when I go on with mouse, jQuery detect when I leave the ".config" class...

When can I do for resolve this problem ????

Thank you for help

(Sorry for my english :p)