鼠标悬停控制下拉框的显示和隐藏

先上图：

要求鼠标悬浮在用户名上时 弹出下拉框，鼠标离开用户名时下拉框隐藏，并且鼠标移动到下拉框上时下拉框不隐藏。

html代码：

1.  
   <div class="user_header">
2.  
   <a class="user_a" href="javascript:void(0);"><label runat="server" id="user"></label><i class="user_arrow"></i></a>
3.  
   <div class="userInfo">
4.  
   <ul class="user_ul">
5.  
   <li><a href="#"><i class="user_perInfo"></i>个人信息</a></li>
6.  
   <li><a href="#"><i class="user_lock"></i>锁定屏幕</a></li>
7.  
   <li><a href="#"><i class="user_key"></i>退出</a></li>
8.  
   </ul>
9.  
   </div>
10.  
    </div>

这里难控制的是鼠标离开用户名时的判断，这个地方我试了我想到的几个办法结果都不理想，最后在网上找到大神的提示，最后解决如下：

1.  
   var timer;
2.  
   $(".user_header a").mouseover(function () {
3.  
   clearTimeout(timer);
4.  
   $(".userInfo").show();
5.  
   });
6.  
   $(".user_header a").mouseout(function () {
7.  
   timer = setTimeout(function () {
8.  
   $(".userInfo").hide();
9.  
   }, 500);
10.  
    });
11.  
    $(".user_ul").mouseover(function () {
12.  
    clearTimeout(timer);
13.  
    });
14.  
    $(".user_ul").mouseout(function () {
15.  
    $(".userInfo").hide();
16.  
    });

思路：1、当鼠标进入(mouseover)用户名时，弹出下拉框；

           2、当鼠标离开(mouseout)用户名时，添加一个定时器来隐藏下拉框；

          3、当鼠标进入(mouseover)下拉框时，清除定时器；

         4、当鼠标离开(mouseout)下拉框时，下拉框隐藏；