支持多种浏览器，体验效果：
http://keleyi.com/keleyi/phtml/jqmenu/4.htm

多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>jquery实现多级下拉菜单-柯乐义</title>

 <style>

 /* navigation style */

 #keleyi-com-nav{

 height: 39px;

 font: 12px Geneva, Arial, Helvetica, sans-serif;

 background: #2D2D2D;

 border: 1px solid #323232;

 border-radius: 3px;

 min-width:500px;

 margin-left: 0px;

 padding-left: 0px;

 }    

 #keleyi-com-nav li{

 list-style: none;

 display: block;

 float: left;

 height: 40px;

 position: relative;

 border-right: 1px solid #323232;

 }

 #keleyi-com-nav li a{

 padding: 0px 10px 0px 30px;

 margin: 0px 0;

 line-height: 40px;

 text-decoration: none;

 border-right: 1px solid #636161;

 height: 40px;

 color: #FFF;

 text-shadow: 1px 1px 1px #66696B;

 }

 #keleyi-com-nav ul{

 background: #f2f5f6;

 padding: 0px;

 border-bottom: 1px solid #DDDDDD;

 border-right: 1px solid #DDDDDD;

 border-left:1px solid #DDDDDD;

 border-radius: 0px 0px 3px 3px;

 box-shadow: 2px 2px 3px #ECECEC;

 -webkit-box-shadow: 2px 2px 3px #ECECEC;

 -moz-box-shadow:2px 2px 3px #ECECEC;

 width:170px;

 }

 #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{

 padding-left: 10px;

 padding-right: 10px;

 color: #FFF;

 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;

 width: 160px;

 }

 #keleyi-com-nav .site-name a{

 width: 129px;

 overflow:hidden;

 }

 #keleyi-com-nav li.facebook{

 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;

 }

 #keleyi-com-nav li.facebook:hover {

 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;

 }

 #keleyi-com-nav li.yahoo{

 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;

 }

 #keleyi-com-nav li.yahoo:hover {

 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;

 }

 #keleyi-com-nav li:hover{

 background: #010101;

 }

 #keleyi-com-nav li a{

 display: block;

 }

 #keleyi-com-nav ul li {

 border-right:none;

 border-bottom:1px solid #DDDDDD;

 width:170px;

 height:39px;

 }

 #keleyi-com-nav ul li a {

 border-right: none;

 color:#6791AD;

 text-shadow: 1px 1px 1px #FFF;

 border-bottom:1px solid #FFFFFF;

 }

 #keleyi-com-nav ul li:hover{background:#DFEEF0;}

 #keleyi-com-nav ul li:last-child { border-bottom: none;}

 #keleyi-com-nav ul li:last-child a{ border-bottom: none;}

 /* Sub menus */

 #keleyi-com-nav ul{

 display: none;

 visibility:hidden;

 position: absolute;

 top: 40px;

 }

 /* Third-level menus */

 #keleyi-com-nav ul ul{

 top: 0px;

 left:170px;

 display: none;

 visibility:hidden;

 border: 1px solid #DDDDDD;

 }

 /* Fourth-level menus */

 #keleyi-com-nav ul ul ul{

 top: 0px;

 left:170px;

 display: none;

 visibility:hidden;

 border: 1px solid #DDDDDD;

 }

 #keleyi-com-nav ul li{

 display: block;

 visibility:visible;

 }

 #keleyi-com-nav li:hover > ul{

 display: block;

 visibility:visible;

 }

 </style>

 <!--[if IE 7]>

 <style>

 #keleyi-com-nav{

 margin-left:0px

 }

 #keleyi-com-nav ul{

 left:-40px;

 }

 #keleyi-com-nav ul ul{

 left:130px;

 }

 #keleyi-com-nav ul ul ul{

 left:130px;

 }

 </style>

 <![endif]-->

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

 $(document).ready(function () {

 $("#kel"+"eyi-com-nav li").hover(

 function () {

 $(this).children('ul').hide();

 $(this).children('ul').slideDown('fast');

 },

 function () {

 $('ul', this).slideUp('fast');

 });

 });

 </script>

 </head>

 <body>

 <ul id="keleyi-com-nav">

 <li class="site-name"><a href="http://keleyi.com">&nbsp;</a></li>

 <li class="yahoo"><a href="http://keleyi.com">导航菜单</a>

 <ul>

 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">导航菜单二级分类 &raquo;</a>

 <ul>

 <li><a href="http://keleyi.com">1</a></li>

 <li><a href="http://keleyi.com/a/bjac/r55i6646.htm">2</a></li>

 <li><a href="http://keleyi.com">3</a></li>

 <li><a href="http://keleyi.com">导航菜单三 &raquo;</a>

 <ul>

 <li><a href="http://keleyi.com">导航菜单4</a></li>

 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm">1</a></li>

 </ul>

 </li>

 </ul>

 </li>

 <li><a href="http://keleyi.com">1</a></li>

 <li><a href="http://keleyi.com">2</a></li>

 </ul>

 </li>

 <li class="facebook"><a href="http://keleyi.com">翻页</a>

 <ul>

 <li><a href="http://keleyi.com">1</a></li>

 <li><a href="http://keleyi.com">2</a></li>

 </ul>

 </li>

 </ul>

 </body>

 </html>

更多菜单：http://keleyi.com/a/bjac/veugsmw9.htm

Web前端资源汇总：http://www.cnblogs.com/jihua/p/webfront.html

原文：http://keleyi.com/a/bjac/qe60secm.htm

jquery实现多级下拉菜单的更多相关文章

  1. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  2. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  3. 小程序多级下拉菜单demo

    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211

  4. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  5. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  6. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  7. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  8. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  9. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

随机推荐

  1. CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  2. HTTP Status 500 - The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application

    j 今天下午一直报这个问题,google了半天没有找到答案.百度了下,说是 tomcat的 lib文件夹下缺少jstl1.2,因为项目里面用的也是 jstl1.2和 standard-1.1.2.ja ...

  3. Data Flow的Error Output

    一,在Data Flow Task中,对于Error Row的处理通过Error Output Tab配置的. 1,操作失败的类型:Error(Conversion) 和 Truncation. 2, ...

  4. C#设计模式系列：组合模式（Composite）

    1.组合模式简介 1.1>.定义 组合模式主要用来处理一类具有“容器特征”的对象——即它们在充当对象的同时,又可以作为容器包含其他多个对象. 1.2>.使用频率 中高 2.组合模式结构图 ...

  5. Objective-C中的继承和多态

    面向对象编程之所以成为主流的编程思想和他的继承和多态是分不开的,只要是面向对象语言都支持继承和多态,当然不同的OOP语言之间都有其特点.OC中和Java类似,不支持多重继承,但OOP语言C++就支持多 ...

  6. 附录A 编译安装Hadoop

    A.1  编译Hadoop A.1.1  搭建环境 第一步安装并设置maven 1.  下载maven安装包 建议安装3.0以上版本(由于Spark2.0编译要求Maven3.3.9及以上版本),本次 ...

  7. Oracle OCP 1Z0-053 Exam Topics

    根据OU官方发布的考试大纲,OCP 1Z0-053考点如下: 1. Database Architecture and ASM Describe Automatic Storage Managemen ...

  8. Android 学习Activity（1）activity和intent

    工具是:JDK环境配置+SDK+ADT工具 一.Activity  主要作用: 1.用户与应用程序的接口 2.控件的容器 二.创建Activity要点:(在src中的目录下包里) 1.一个Activi ...

  9. 代码的坏味道（4）——过长参数列(Long Parameter List)

    坏味道--过长参数列(Long Parameter List) 特征 一个函数有超过3.4个入参. 问题原因 过长参数列可能是将多个算法并到一个函数中时发生的.函数中的入参可以用来控制最终选用哪个算法 ...

  10. 用Vagrant和Ansible搭建持续交付平台

    这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...