<!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基础 len函数 返回一个字符串的长度

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

  2. SQl格式化日期时间

    Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVE ...

  3. DISPLAY_ITEM built-in in Oracle D2k Forms

    DISPLAY_ITEM built-in in Oracle D2k Forms DescriptionMaintained for backward compatibility only. For ...

  4. Vmware10.0 安装系统以及使用笔记

    1.安装教程参考 大致分为:vmware10.0安装-------建立虚拟机---------设置虚拟机---------启动虚拟机(IOS安装)---------安装系统---------安装vmt ...

  5. [Java解惑]数值表达式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. 线程入门之实现Runnable接口和继承Thread类

    线程的2种使用方式:实现Runnable接口和继承Thread类 1.实现Runnable接口 实现Runnable接口,必须实现run方法,也是Runnable接口中的唯一一个方法 class Ru ...

  7. Codeforces Round #376 (Div. 2) C. Socks bfs

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  8. linux 命令行模式下，浏览网页

    Ubuntu自带最新版的Gnome桌面,拥有大量的服务和桌面应用程序,让您仅通过一张安装光盘就可以体验到无比舒适的操作环境.下文介绍的在ubuntu下使用终端命令行上网的方法. 第一步,需要安装一个名 ...

  9. iOS - UICollectionViewController

    前言 NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionView : UIScrollView @available(iOS 6.0, *) pub ...

  10. amd64_or_ia64?

    amd64 网上资料: 1. IA64是intel推出的架构,AMD64是AMD推出的.IA64不兼容原有的32位x86架构指令集,后来被证明这种做法是不成功的,于是Intel发展处IA64e架构,对 ...