需要实现的效果如图：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style type="text/css">
  7.     * {
  8.       margin: ;
  9.       padding: ;
  10.     }
  11.  
  12.     ul {
  13.       list-style: none;
  14.     }
  15.  
  16.     .wrap {
  17.       width: 330px;
  18.       height: 30px;
  19.       margin: 100px auto ;
  20.       padding-left: 10px;
  21.       background-image: url(imgs/bg.jpg);
  22.     }
  23.  
  24.     .wrap li {
  25.       background-image: url(imgs/libg.jpg);
  26.     }
  27.  
  28.     .wrap > ul > li {
  29.       float: left;
  30.       margin-right: 10px;
  31.       position: relative;
  32.     }
  33.  
  34.     .wrap a {
  35.       display: block;
  36.       height: 30px;
  37.       width: 100px;
  38.       text-decoration: none;
  39.       color: #;
  40.       line-height: 30px;
  41.       text-align: center;
  42.     }
  43.  
  44.     .wrap li ul {
  45.       position: absolute;
  46.       top: 30px;
  47.       display: none;
  48.     }
  49.   </style>
  50.   <script src="../jquery-1.12.4.js"></script>
  51.   <script>
  52.     $(function () {
  53.  
  54.       //mouseover：鼠标经过事件
  55.       //mouseout:鼠标离开事件
  56.  
  57.       //mouseenter:鼠标进入事件
  58.       //mouseleave：鼠标离开事件
  59.  
  60.       var $li = $(".wrap>ul>li");
  61.  
  62.       //给li注册鼠标经过事件，让自己的ul显示出来
  63.       $li.mouseenter(function () {
  64.         //找到所有的儿子，并且还得是ul
  65.         $(this).children("ul").show();
  66.       });
  67.  
  68.       $li.mouseleave(function () {
  69.         $(this).children("ul").hide();
  70.       });
  71.  
  72.     });
  73.   </script>
  74. </head>
  75. <body>
  76. <div class="wrap">
  77.   <ul>
  78.     <li>
  79.       <a href="javascript:void(0);">一级菜单1</a>
  80.       <ul class="ul">
  81.         <li><a href="javascript:void(0);">二级菜单11</a></li>
  82.         <li><a href="javascript:void(0);">二级菜单12</a></li>
  83.         <li><a href="javascript:void(0);">二级菜单13</a></li>
  84.       </ul>
  85.     </li>
  86.     <li>
  87.       <a href="javascript:void(0);">一级菜单2</a>
  88.       <ul>
  89.         <li><a href="javascript:void(0);">二级菜单21</a></li>
  90.         <li><a href="javascript:void(0);">二级菜单22</a></li>
  91.         <li><a href="javascript:void(0);">二级菜单23</a></li>
  92.       </ul>
  93.     </li>
  94.     <li>
  95.       <a href="javascript:void(0);">一级菜单3</a>
  96.       <ul>
  97.         <li><a href="javascript:void(0);">二级菜单31</a></li>
  98.         <li><a href="javascript:void(0);">二级菜单32</a></li>
  99.         <li><a href="javascript:void(0);">二级菜单33</a></li>
  100.       </ul>
  101.     </li>
  102.   </ul>
  103. </div>
  104.  
  105. </body>
  106. </html>

js：

  1. $(function () {
  2.  
  3.       //mouseover：鼠标经过事件
  4.       //mouseout:鼠标离开事件
  5.  
  6.       //mouseenter:鼠标进入事件
  7.       //mouseleave：鼠标离开事件
  8.  
  9.       var $li = $(".wrap>ul>li");
  10.  
  11.       //给li注册鼠标经过事件，让自己的ul显示出来
  12.       $li.mouseenter(function () {
  13.         //找到所有的儿子，并且还得是ul
  14.         $(this).children("ul").show();
  15.       });
  16.  
  17.       $li.mouseleave(function () {
  18.         $(this).children("ul").hide();
  19.       });
  20.  
  21.     });

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. JS中使用正则表达式

  2. 【总结整理】如何判断伪需求（摘自pmcafe）

    1.客户不会直接提需求,都是给解决方案,所以得到用户的反馈之后,先反推一下是很必要的,为什么客户会有这样的方案 总结:方案不合适 例如:客户只会说我要快马,反推一下,其实客户是想要更快,这样的话,解决 ...

  3. 配置springboot在访问404时自定义返回结果以及统一异常处理

    在搭建项目框架的时候用的是springboot,想统一处理异常,但是发现404的错误总是捕捉不到,总是返回的是springBoot自带的错误结果信息. 如下是springBoot自带的错误结果信息: ...

  4. C++——多线程

    1.多进程和多线程:进程是一个总任务,一个进程可能包含多个线程. 2.并行和并发: 并发的关键是你有处理多个任务的能力,不一定要同时. 并行的关键是你有同时处理多个任务的能力. 3.共享数据的管理和线 ...

  5. HTTP 协议中 URI 和 URL 有什么区别？

    HTTP 协议中 URI 和 URL 有什么区别? HTTP = Hyper Text Transfer ProtocolURI = Universal Resource IdentifierURL ...

  6. c语言实践 打印字母三角形

    效果如下: 我是怎么想的: 总共需要打印6行字母,那么就需要一个循环来控制打印第几行,大概代码如下: for(int i=0;i<6;i++) { } 每行都会打印字母,而且循环越往后,需要打印 ...

  7. 19. AUTO INCREMENT 字段

    Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INCREMENT 字段 我们通常希望在每次插入新记录时,自动地创建主键字段的值. 我们可以在表中创建一个 auto- ...

  8. PHP初级经典面试题目汇总

    17.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...

  9. js精度（摘）

    Math.formatFloat = function (f, digit) {    var m = Math.pow(10, digit);    return parseInt(f * m, 1 ...

  10. redis过期key的清理策略

    一,有三种不同的删除策略(1),立即清理.在设置键的过期时间时,创建一个回调事件,当过期时间达到时,由时间处理器自动执行键的删除操作. (2),惰性清理.键过期了就过期了,不管.当读/写一个已经过期的 ...