js css滑鼠懸停顯示下拉選單

<div class="swss_xx">
            <ul class="clearfix">
                <li id="xxwh"><a href="#" οnclick="javascript:studentInfoUpdate()">個人資訊維護</a>
                    <div id="show_xxwh" style="display: none">
                        <ul>
                            <li><a href="#" οnclick="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;}