支持多种浏览器，体验效果：
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. Atitit 分区后的查询  mysql分区记录的流程与原理

    Atitit 分区后的查询  mysql分区记录的流程与原理 1.1.1. ibd是MySQL数据文件.索引文件1 1.2. 已经又数据了,如何分区? 给已有的表加上分区 ]1 1.3. 分成4个区, ...

  2. WPF入门教程系列二十一——DataGrid示例(一)

    前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...

  3. API调试工具推荐 - httpie

    API调试工具推荐 - httpie <HelloGitHub>第07期上面看到这个python项目,好东西 文档地址 但是安装的时候报错,google之后发现是个已知的bug,直接使用p ...

  4. C#设计模式系列：代理模式（Proxy）

    代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...

  5. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  6. 分享一个LiteDB做的简单考试系统辅助工具

    凌晨,被安排在公司值班,因为台风“灿鸿”即将登陆,风力太大,办公楼,车间等重要部分需要关注.所以无聊,那就分享一下,今天给朋友临时做的一个小的考试系统辅助工具吧.其实非常小,需求也很简单,但是可以根据 ...

  7. ASP.NET WebAPi之断点续传下载（下）

    前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...

  8. 哪些HTML5特性值得期待

    首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...

  9. hdu4831 Scenic Popularity（线段树）

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4831 题目大概意思就是有多个风景区和休息区,每个风景区有热度,休息区的热度与最接近的分景区的热度相同, ...

  10. Cookie/Session机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...