二级菜单

当鼠标移到一级菜单上时，二级菜单显示，当移到二级菜单上是，还显示，移出二者时，二级菜单隐藏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
<style type="text/css">
    
    #box{
        width:200px;
        height:500px;
        margin:0 auto;
    }
    #box ul li{
        list-style: none;
        float:left;
        margin-right:10px;
        border: 1px solid #ccc;
    }
    #box ul li dl dd{
        margin-top:10px;
        padding: 0;
        margin: 0;
    }
    #box ul li dl dd p{
        margin-top:10px;
    }
    .hide{
        display:none;
    }

</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#box ul li dl dt').mouseover(function(){//当鼠标移到dt上触发
        $(this).siblings('dd').removeClass('hide');//在此dt的兄弟节点上删除class，使二级菜单显示，用兄弟节点查找为了防止多个dt标签的干扰
    })
    $('#box ul li dl dt').mouseout(function(){//当鼠标移出dt触发
        $(this).siblings('dd').mouseover(function(){//当鼠标又到二级菜单上时，还显示
            $(this).removeClass('hide')
        })
        $(this).siblings('dd').mouseout(function(){//当移出dd，也移出dd时，添加class，二级菜单隐藏
            $(this).addClass('hide');
        })
        
    })
})
</script>
</head>
<body>
  <div id="box">
      <ul>
          <li>
              <dl>
                  <dt><a href="">客户服务</a></dt>
                  <dd class="hide">
                      <p><a href="">帮助中心</a></p>
                      <p><a href="">售后服务</a></p>
                      <p><a href="">在线客服</a></p>
                      <p><a href="">意见建议</a></p>
                      <p><a href="">客服邮箱</a></p>
                  </dd>
              </dl>
          </li>
          <li>
              <dl>
                  <dt><a href="">客户服务</a></dt>
                  <dd class="hide">
                      <p><a href="">帮助中心</a></p>
                      <p><a href="">售后服务</a></p>
                      <p><a href="">在线客服</a></p>
                      <p><a href="">意见建议</a></p>
                      <p><a href="">客服邮箱</a></p>
                  </dd>
              </dl>
          </li>
      </ul>
  </div>  
</body>
</html>

 

posted @ 2015-06-29 12:35  飘逸110  阅读(213)  评论(0)    收藏  举报