<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title><Document></title>

 </head>

 <style type="text/css">

 ul,li,body{margin:0;padding: 0;}

 #nav{width: 500px;margin: 10px auto;}

     ul li{list-style: none;}

     .clear{clear: both;}

     #nav>li{float: left;position: relative;}

     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}

     li a:hover{background: #c66;color: #fff;}

     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}

 </style>

 <body>

     <ul id="nav">

         <li>

             <a href="#">一级菜单</a>

             <ul class="subNav">

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li>

             <a href="#">一级菜单</a>

             <ul class="subNav">

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li><a href="#">一级菜单</a></li>

         <li><a href="#">一级菜单</a></li>

         <li><a href="#">一级菜单</a></li>

         <div class="clear"></div>

     </ul>

     <script src="jquery.min.js"></script>

     <script type="text/javascript">

      $('#nav>li').hover(

          function(){

              $(this).find("ul").animate({height:"150px"}, 200)

          },

          function(){

              $(this).find("ul").animate({height:0}, 200)

          }

          )

     </script>

 </body>

 </html>

同样的效果用jquery实现会简单的多。代码如上

二级菜单jquery的更多相关文章

  1. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  2. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  4. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  5. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  6. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  7. JQuery 纵向二级菜单与对齐方式

    1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...

  8. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jQuery show hide方法 二级菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SqlSever基础 detalength函数 字节的个数

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. 循环，range，continue 和 break

    1.for循环 用户按照顺序循环可迭代对象中的内容, PS:break.continue li = [11,22,33,44] for item in li:     print item 2.enu ...

  3. JAVA WEB SpringMVC+Spring+hibernate 框架搭建【转】

    http://my.oschina.net/Thinkeryjgfn/blog/158951

  4. C#四则运算之策略模式

    Calculator.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  5. CUBRID学习笔记 40 使用net修改数据

    修改 connection.Open();     string queryString = "UPDATE nation set capital = 'X' where `code` = ...

  6. 线程入门之sleep

    package com.thread; /** * <sleep:使线程休眠一些时间> * <功能详细描述> * * @author 95Yang */ public clas ...

  7. Android——学习：线性布局权重分配

    LinearLayout在Android中被广泛使用,LinearLayout有一个比较重要的属性——android:layout_weight.按照字面理解就是该控件的权重,这个值默认是 零(0). ...

  8. Java中的线程池

    package com.cn.gbx; import java.util.Date; import java.util.Random; import java.util.Timer; import j ...

  9. Scrum Meeting---Two(2015-10-26)

    这次会议主要有两个方面 一.讨论项目 经过我们团队的激烈讨论,我们团队决定专注于做二手交易这一块.即将之前决定要做的学习经验交流以及校园交由这两块删除. 二.后两天的任务规划 以下便是我们的任务规划: ...

  10. ZOJ-2365 Strong Defence 无公共边割边集

    题意:该题的题意晦涩,勉勉强强听别人说了一遍后再读了一遍题才算懂了题意,题图说的是A国因为B国药进攻自己的国家,于是想办法在联通A-B之间的路径上进行阻击.阻击的舰船停留在一个路径上,舰船上都要放置水 ...