支持多种浏览器，体验效果：
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. ajax的使用：例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...

  2. [译]AngularJS $apply, $digest, 和$evalAsync的比较

    原文:The differences between AngularJS $apply, $digest, and $evalAsync 你是不是也常在想AngularJS $apply, $dige ...

  3. C#实现哥德巴赫猜想

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Goet ...

  4. CSS3总结 （帅哥）

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷 ...

  5. OpenCascade Primitives BRep-Cone

    OpenCascade Primitives BRep-Cone eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  6. .Net 转战 Android 4.4 日常笔记（10）--PullToRefresh下拉刷新使用

    下拉刷新很多地方都用到了,新浪微博,微信,百度新闻 这里我们使用一个开源的库叫:PullToRefresh 开源地址:https://github.com/chenyoca/pull-to-refre ...

  7. EntityFramework之Log（五）

    关于日志 属性日志 DbContext.Database.Log 属性被设置为一个委托,该委托能接受带有一个字符串参数的任何方法,最主要的是,通过设置它到 TextWriter 的 Write 方法将 ...

  8. T-SQL：毕业生出门需知系列（三）

    第3课 排序检索数据 3.1 排序数据(ORDER BY) 下面的 SQL 语句返回某个数据库表的单个列.观察其输出,并没有特定的顺序. SELECT prod_name FROM Products; ...

  9. 窥探Swift编程之在Playground上尽情的玩耍

    自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground".Playground就像操场一样,可以供我们在代码的世界里尽情的玩耍,在本篇博客中就 ...

  10. 我的iOS开发系列博文

    之前目录性的总结了发表过的关于OC方面的文章,今天在目录性的总结一下有关iOS开发的文章.走过路过不要错过哦,今天的博文也全都是干货.写技术博客与大家交流一下思想也是不错的. 下面是我的技术博客中有关 ...