支持多种浏览器，体验效果：
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. iOS-----写一个规范的单例--->

    1.集成了一个宏 2.两句代码集成单例 3.一句代码调用单例 -------------> 1.集成了一个宏 //这里就要注意了,因为每个单例中,方法名可以不一样,那么我们就不能把名字写死,要灵 ...

  2. maven的聚合与继承

    新建一个空的maven项目user-parent Pom.xml内容 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...

  3. junit测试，使用classpath和file 加载文件的区别

    用junit测试发现一个问题,怎么加载配置文件?一直都出现这样的错误 ERROR: org.springframework.test.context.TestContextManager - Caug ...

  4. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  5. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  6. Android的PopWindow动画实现

    转载博客:http://www.open-open.com/lib/view/open1423626956186.html 1.实现步骤 1.主布局activity_main.xml <Rela ...

  7. 创建第一个 vlan network "vlan100" - 每天5分钟玩转 OpenStack（94）

    上一节我们在 ML2 配置中 enable 了 vlan network,今天将创建 vlan100 并讨论底层网络变化. 打开菜单 Admin -> Networks,点击 “Create N ...

  8. 数据可视化-EChart2.0.0使用中遇到的2个问题

    之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可.然后现在开发的系统需要交付给客户使用.所以现在图表控件不能直接使用FusionChart和HighChart,通 ...

  9. 从零开始构建 Wijmo & Angular 2 小应用

    中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Angular 1.X 中的 directives, co ...

  10. kafka源码分析之二客户端分析

    客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...