js css鼠标悬停显示下拉菜单

<div class="swss_xx">
            <ul class="clearfix">
                <li id="xxwh"><a href="#" onclick="javascript:studentInfoUpdate()">个人信息维护</a>
                    <div id="show_xxwh" style="display: none">
                        <ul>
                            <li><a href="#" onclick="javascript:studentInfoUpdate()">学生信息修改</a></li>
                            <%--<li><a href="#">修改密码</a></li>--%>
                            <%--<li><a href="#">修改密码</a></li>--%>
                        </ul>
                    </div>
                </li>
                <%--<li><a href="javascript:pwdCon();">修改密码</a></li>--%>
                <li><a href="<%=ctx %>/logout">退出</a></li>
            </ul>
            <p><span id="uname">登录用户：</span>            
                <span id="cid">所在班级： </span>
            </p>
</div>

js文件

//个人信息维护下拉菜单样式
$(function () {
    //个人信息维护下拉菜单
    $("#show_xxwh").hide();
     $("#xxwh").hover(function () {
        $("#show_xxwh").show();
  }, function () {
        $("#show_xxwh").hide();
    })
   // 鼠标移动到show_xxwh 的div上的时候show_xxwh div不会被隐藏
     $("#show_xxwh").hover(function () {
        $("#show_xxwh").show();
     }, function () {
         $("#show_xxwh").hide();
     })
   
});

css 文件

.swss_xx ul li#xxwh{width:100px;position:relative;}
#show_xxwh{width:100px;height:auto;background:#fff;border:1px #d0d0d0 solid;border-radius:10px;position:absolute;top:18px;left:0px;}
#show_xxwh ul{float:none;margin:5px 0px;}
#show_xxwh ul li{width:100px;height:24px;margin-left:0px;float:none;}
#show_xxwh ul li a{font:12px/24px "Microsoft Yahei";color:#666666;text-align:center;border:none;border-radius:0px;}
#show_xxwh ul li a:hover{background:#ccc;}