jQuery简单实现两级下拉菜单效果代码

本文实例讲述了jQuery简单实现两级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款两级下拉菜单,jquery插件版，在IE6/IE7/IE8下运行良好，在本示例中，菜单仅显示了四组，不过原理是一样的，菜单较长的话直接复制其中一组就行了，直到满足你的应用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/

具体代码如下：

*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }




首 页
导航菜单

采购


企业采购

企业评测
企业报价


行情报价

导航1
导航2
导航3

希望本文所述对大家的jQuery程序设计有所帮助。