这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>css+jquery打造二级横向菜单</title> <style type="text/css" /> #droplinebar {overflow: hidden;} .droplinebar ul{ margin: 0; padding: 0; float: left; width: 100%; font: bold 14px Arial, Helvetica, sans-serif,微软雅黑; text-align:center; background: #006b96 url(images/blueactive.gif) center center repeat-x;} .droplinebar ul li{display: inline;} .droplinebar ul li a{ float: left; display: block; color: white; width: 127px; padding:11px 2px; text-decoration: none;} .droplinebar ul li a:visited{color: white;} .droplinebar ul li a:hover, .droplinebar ul li .current{ color: white;background: transparent url(images/bluedefault.gif) center center repeat-x;padding:11px 2px;} .droplinebar ul li ul{ position: absolute; z-index: 100; padding: 5px 0; top: 0; background: #006791; visibility: hidden;} .droplinebar ul li ul li a{ font: bold 14px 微软雅黑,Arial, Helvetica, sans-serif; padding:5px 0; margin: 0;} .droplinebar ul li ul li a:hover{ background: #024662;} </style> <script type="text/javascript" src="https://www.jb51.net/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var droplinemenu={ arrowimage: {classname: 'downarrowclass', src: 'images/down.gif', leftpadding: 5}, animateduration: {over: 200, out: 100}, buildmenu:function(menuid){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false if (!this.istopheader) $subul.css({left:0, top:this._dimensions.h}) var $innerheader=$curobj.children('a').eq(0) $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader $innerheader.append( '<img src="'+ droplinemenu.arrowimage.src +'" />' ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") if ($targetul.queue().length<=1) //if 1 or less queued animations if (this.istopheader) $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h}) if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'}) $targetul.slideDown(droplinemenu.animateduration.over) }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.slideUp(droplinemenu.animateduration.out) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()}) }) //end document.ready } }</script> <script type="text/javascript"> droplinemenu.buildmenu("mydroplinemenu") </script> </head> <body> <div> <ul> <li><a href="#" >网站首页</a></li> <li><a href="#" >网络营销教程</a> <ul> <li><a href="#">基础知识教程</a></li> <li><a href="#">课内实践教程</a></li> <li><a href="#">专项实践教程</a></li> <li><a href="#">毕业论文安排</a></li> </ul> </li> <li><a href="#" >Flash源码</a></li> <li><a href="#" >Photoshop教程</a> <ul> <li><a href="#">基础教程</a></li> <li><a href="#">5步实例教程</a></li> <li><a href="#">文字与按钮教程</a></li> <li><a href="#">图片教程</a></li> <li><a href="#">笔刷等下载</a></li> <li><a href="#">源文件下载</a></li> <li><a href="#">字体下载</a></li> </ul> </li> <li><a href="#" >博客代码</a> <ul> <li><a href="#">博客大巴模板</a></li> <li><a href="#">博客大巴代码</a></li> <li><a href="#">和讯博客代码</a></li> </ul> </li> <li><a href="#" >网店经营</a></li> <li><a href="#" >网络营销研究</a> </li> </ul> </div> </body> </html>