支持多种浏览器，体验效果：
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. PHP分布式中Redis实现Session

    方法一:找到配置文件php.ini,修改为下面内容,保存并重启服务 session.save_handler = redis session.save_path = "tcp://127.0 ...

  2. 谈谈关键字strictfp

     Java语言中的其中一个设计目标是可移植性.无论在哪个虚拟机上运行,同一个计算应该得到同样的结果.对于浮点数的算术运算,实现这样的可移植性是相当困难的.double 类型使用 64 位存储一个 do ...

  3. 从客户端(&)中检测到有潜在危险的 Request.Path 值

    首先,这个问题出现在 ASP.NET MVC 应用程序中,所以下面的解决方式都是在这个环境下. 关于这个问题,网上又很多的答案,当时也搜了一些: A potentially dangerous Req ...

  4. geotrellis使用（五）使用scala操作Accumulo

    要想搞明白Geotrellis的数据处理情况,首先要弄清楚数据的存放,Geotrellis将数据存放在Accumulo中. Accumulo是一个分布式的Key Value型NOSQL数据库,官网为( ...

  5. Myeclipse中导入项目后java类中汉字注释出现乱码问题(已解决)

    今天重装系统,安装了新的Myeclipse后,导入之前的项目后,,出现了乱码问题.乱码问题主要是java类中的注释,而jsp页面中汉字却完好如初: 右键项目,查看项目的编码格式,UTF-8,把java ...

  6. 淘宝web前端开发岗面试经历及感悟

    今天下午四点接到淘宝UED的面试电话,很突然,很激动.现在怀着淡淡的忧伤为之文以志一下. 1.自我介绍一下. 我xx时候毕业,在xx公司任xx职务,主要负责xx balabala.(怕公司同事听到,接 ...

  7. Cesium应用篇：3控件（4）Geocoder

    Geocoder是一个非常简单的控件,但也是非常常用且实用的控件,顾名思义,Geocoder就是地理编码的意思,而平常我们经常会查询一些地物,也就是常用的POI搜索,就是Geocoder的功劳. 首先 ...

  8. 如何用easyui+JAVA 实现动态拼凑datagrid表格

    先给大家看一看效果,最近一段时间都在研究这个东西. 如果我把日期间隔选宽呢?比如5月日到5月5日?下面给大家看看效果,不用担心哦 看到了吧,哈哈,这个日期都是动态生成的,下面就来跟大家分享一下这个的实 ...

  9. Service实现文件下载

    首先在Activity中声明Intent对象,启动Service: //生成Intent对象 Intent intent = new Intent(); //将文件名对象存入到intent对象当中 i ...

  10. 项目积累html标签

    今天遇到一个不太常用都标签,网上以后慢慢记下项目中用到都东西. 1.<em> 标签 告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用斜体来显示. 在文本中 ...