Jq下拉菜单实例

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节

jquer实现的下拉菜单,比较简单,但比较好地告诉你实现的原理,掌握了原理后聪慧的你就可以搞出妖娆的作品了。

<!DOCTYPE html>

<html>


<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }


    ul {

      list-style: none;

    }


    .wrap {

      width: 330px;

      height: 30px;

      margin: 100px auto 0;

      padding-left: 10px;

      background-image: url(imgs/bg.jpg);

    }


    .wrap li {

      background-image: url(imgs/libg.jpg);

    }


    .wrap>ul>li {

      float: left;

      margin-right: 10px;

      position: relative;

    }


    .wrap a {

      display: block;

      height: 30px;

      width: 100px;

      text-decoration: none;

      color: #000;

      line-height: 30px;

      text-align: center;

    }


    .wrap li ul {

      position: absolute;

      top: 30px;

      display: none;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {


      var $li = $(".wrap>ul>li")

      //给li注册鼠标经过事件,让自己的ul显示出来

      $li.mouseenter(function () {

        //找到所有的儿子,并且还得是ul

        $(this).children("ul").show();

      })


      $li.mouseleave(function () {

        $(this).children("ul").hide();

      })



    });

  </script>

</head>


<body>

  <div>

    <ul>

      <li>

        <a href="javascript:void(0);">一级菜单1</a>

        <ul>

          <li><a href="javascript:void(0);">二级菜单11</a></li>

          <li><a href="javascript:void(0);">二级菜单12</a></li>

          <li><a href="javascript:void(0);">二级菜单13</a></li>

        </ul>

      </li>

      <li>

        <a href="javascript:void(0);">一级菜单2</a>

        <ul>

          <li><a href="javascript:void(0);">二级菜单21</a></li>

          <li><a href="javascript:void(0);">二级菜单22</a></li>

          <li><a href="javascript:void(0);">二级菜单23</a></li>

        </ul>

      </li>

      <li>

        <a href="javascript:void(0);">一级菜单3</a>

        <ul>

          <li><a href="javascript:void(0);">二级菜单31</a></li>

          <li><a href="javascript:void(0);">二级菜单32</a></li>

          <li><a href="javascript:void(0);">二级菜单33</a></li>

        </ul>

      </li>

    </ul>

  </div>


</body>


</html>


评论