需要实现的效果如图：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: ;

      padding: ;

    }

    ul {

      list-style: none;

    }

    .wrap {

      width: 330px;

      height: 30px;

      margin: 100px auto ;

      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: #;

      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 () {

      //mouseover：鼠标经过事件

      //mouseout:鼠标离开事件

      //mouseenter:鼠标进入事件

      //mouseleave：鼠标离开事件

      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 class="wrap">

  <ul>

    <li>

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

      <ul class="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>

js：

$(function () {

      //mouseover：鼠标经过事件

      //mouseout:鼠标离开事件

      //mouseenter:鼠标进入事件

      //mouseleave：鼠标离开事件

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

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

      $li.mouseenter(function () {

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

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

      });

      $li.mouseleave(function () {

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

      });

    });

jquery实现下拉菜单的更多相关文章

  1. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  2. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  3. 第72天：jQuery实现下拉菜单

    jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...

  4. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  5. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  6. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  7. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...

  8. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  9. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

随机推荐

  1. Spring Data系列之Jpa（一）

    1.Spring Data的由来 Spring Data是SpringSource基金会创下的一个简化数据库访问.支持云服务的开源框架.其主要目的是让数据库访问变的方便快捷,可以用Spring Dat ...

  2. saltstack系列(六)——zmq扩展(二)

    问题 我们已经熟练的掌握了REQ/REP模式,它是一个一对多的模式,一个REP对应多个REQ. 但是现实工作中,我们会遇到这样的难题,一个REP无法满足REQ的提问,因为REQ太多了,虽然可以增加一个 ...

  3. SELINUX配置

    今天试着将centos7的ssh默认端口改成1234,但改了后,SSHD服务竟然启动不了了.后来关了selinux测试,果然可以了.但这是运行环境,不能关,所以不得不配置semanage! 一.安装s ...

  4. sqlserver 把SELECT结果集中一列的所有的值 用逗号隔开放进一个字段内

    首先我们有一个表 查询结果如下: 现在我们想要把USER_NAME这一列的内容 放到一个字段里面去: 一行sql语句解决问题: SELECT STUFF(( SELECT ',' +convert(V ...

  5. Mybatis简化sql书写,别名的使用

    之前,我们在sql映射xml文件中的引用实体类时,需要写上实体类的全类名(包名+类名),如下: <!-- 创建用户(Create) --> <insert id="addU ...

  6. php析构方法关于栈的问题

    <?php class test{ var $name; var $sex; var $age; function __construct( $name, $sex ,$age ) { $thi ...

  7. SQL Server 索引维护：系统常见的索引问题

    在很多系统中,比如本人目前管理的数据库,索引经常被滥用,甚至使用DTA(数据库引擎优化顾问)来成批创建索引(DTA目前个人认为它的真正用处应该是在发现缺失的统计信息,在以前的项目中,用过一次DTA,里 ...

  8. Luogu 4951 [USACO 2001 OPEN]地震

    水个博客玩. $01$分数规划. 题目要求$\frac{F - \sum_{i = 1}^{n}C_i}{T_i}$最大,设$\frac{F - \sum_{i}C_i}{T_i} \geq e$,移 ...

  9. Linux下安装Pcntl PHP扩展

    //解压源码包 [root@centos src]# tar -zxvf php-5.5.35.tar.gz //进入pcntl扩展库 [root@centos src]# cd php-5.5.35 ...

  10. 自定义UINavigationBar的背景【转】

    from:http://cocoa.venj.me/blog/custom-navbar-background/ 为了让我们的应用程序更加美观,我们往往希望对iPhone自带的控件进行一点自定义.比如 ...