<!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. CodeForces 651B Beautiful Paintings 贪心

    A. Joysticks time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  2. sysbench 0.5 oltp测试笔记

    sysbench 0.5相比0.4版本的主要变化是,oltp测试结合了lua脚本,不需要修改源码,通过自定义lua脚本就可以实现不同业务类型的测试.同时0.5相比0.4需要消耗更多的cpu资源. 1. ...

  3. 关于cookie的清除

    关于cookie的清除     设置cookie时若指定了目录,那么在删除cookie时也必须指定相同的目录,如此才可以删除之前设置的cookie的值!!!!!!!!!

  4. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

  5. python_way,day8 面向对象【多态、成员--字段 方法 属性、成员修饰符、特殊成员、异常处理、设计模式之单例模式、模块：isinstance、issubclass】

    python_way day8 一.面向对象三大特性: 多态 二.面向对象中的成员 字段.方法属性 三.成员修饰符 四.特殊成员 __init__.__doc__.__call__.__setitem ...

  6. XPah学习

    资料1: 来源:http://www.cnblogs.com/ChengDong/archive/2012/06/28/2567744.html 示例Xml: <?xml version=&qu ...

  7. poj 2985 The k-th Largest Group 树状数组求第K大

    The k-th Largest Group Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 8353   Accepted ...

  8. Python numpy学习笔记（一）

    下边代码是关于numpy的一些基本用法,包括数组和矩阵操作等... import numpy as np print "<== print version ==>" p ...

  9. 关于seafile启动的问题解决

    过了一个国庆,同事反映说seafile服务挂掉了,无法正常连接. 刚才解决了一下,把相关问题简要记录一下: 1.首先连接阿里云,获得相关IP地址(如果已知IP地址,则不需要该步骤)

  10. iOS - OC NSNumber 数字

    前言 @interface NSNumber : NSValue @interface NSDecimalNumber : NSNumber 将基本数据类型包装成 OC 对象 1.NSNumber 与 ...