<!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. Linux常见问题的处理方法（长期更新）

    一.使用sudo命令时xxx is not in the sudoers file. This incident will be reported. 1.su -,输入root的密码完成身份切换. 2 ...

  2. 【转】基于APD的光电探测器电路研究与设计

    光电探测器电路用于对光电转换器件输出的微弱电压或电流信号进行放大.处理和整形输出.对于不同探测用途而采用的光电转换器件不同,与之配合使用的光电探测器电路性能也因此而不同.如果用来进行光电转换,则重点考 ...

  3. [SAP ABAP开发技术总结]CLEAR、REFRESH、FREE内表清理区别

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

  4. 未能加载文件或程序集xxx或它的某一个依赖项 试图加载格式不正确的程序

    解决方案:IIS——应用程序池——高级设置——启用32位应用程序 :true.

  5. 利用tomcat配置网站

    1: 首先将tomcat考到C盘: 2:建立我们存放web应用的目录,我建立在D:\myWeb  ,然后将自己的web应用考到myWeb目录下: 3:wApp的目录结构为: WEB-INF: 结构: ...

  6. thinkphp 初始配置

    他喵的,去做了个其他的模板,一段时间不碰tp,居然配置了好久 记录留备用 一.把下好的ThinkPHP放到根目录的文件夹下 ,例如www文件夹下 在www目录下新建文件夹admin和home 新建入口 ...

  7. DZY Loves Chessboard

    DescriptionDZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m ...

  8. poj3565Ants(KM-几何与图论的结合）

    链接 可以看出蓝的之和一定比红的之和要大,也就是说符合条件的匹配一定是权值最小的,所以二分图的最佳完美匹配..KM #include <iostream> #include<cstd ...

  9. JS 对象（Object）和字符串（String）互转

    利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = ...

  10. sqlplus命令大全

    一.ORACLE的启动和关闭 1.在单机环境下要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下su - oracle a.启动ORACLE系统oracle>svrmgrlSVR ...