<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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(blueactive.gif)center center repeat-x; /*default background of menu bar*/}
.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 ulli .current{ /*background of main menu bar links onMouseover*/
color: white;background: transparenturl(bluedefault.gif) center center repeat-x;padding:11px 2px;}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
padding: 5px 0;
top: 0;
background: #006791; /*sub menu backgroundcolor */
visibility: hidden;}
/* Sub level menu links style */
.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{ /*submenu links' background color onMouseover */
background: #024662;}
</style>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var droplinemenu={
arrowimage:{classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration:{over: 200, out: 100}, //duration of slide in/ outanimation, in milliseconds
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 //if header contains inner SPAN, usethat
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$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()})
}) //enddocument.ready
}
}
</script>
<scripttype="text/javascript">
//build menu with DIVID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
</head>
<body>
<div id="mydroplinemenu"class="droplinebar">
<ul>
<li><ahref="http://www.duice.net/" >网站首页</a></li>
<li><ahref="http://www.duice.net/" >网络营销教程</a>
<ul>
<li><a href="http://www.duice.net">基础知识教程</a></li>
<li><a href="http://www.duice.net">课内实践教程</a></li>
<li><a href="http://www.duice.net">专项实践教程</a></li>
<li><ahref="http://www.szlsx.net/logs/41208172.html">毕业论文安排</a></li>
</ul>
</li>
<li><ahref="http://www.duice.net" >Flash源码</a></li>
<li><a href="http://www.duice.net">Photoshop教程</a>
<ul>
<li><a href="http://www.duice.net">基础教程</a></li>
<li><ahref="http://www.szlsx.net/logs/41467119.html">5步实例教程</a></li>
<li><ahref="http://www.szlsx.net/logs/41461836.html">文字与按钮教程</a></li>
<li><a href="http://www.szlsx.net/logs/41462058.html">图片教程</a></li>
<li><ahref="http://www.szlsx.net/logs/41473950.html">笔刷等下载</a></li>
<li><ahref="http://www.szlsx.net/logs/43794097.html">源文件下载</a></li>
<li><ahref="http://www.szlsx.net/logs/41476682.html">字体下载</a></li>
</ul>
</li>
<li><ahref="http://www.duice.net/" >博客代码</a>
<ul>
<li><ahref="http://www.szlsx.net/logs/44266485.html">博客大巴模板</a></li>
<li><ahref="http://www.szlsx.net/logs/42606243.html">博客大巴代码</a></li>
<li><a href="http://www.szlsx.net/logs/42606640.html">和讯博客代码</a></li>
</ul>
</li>
<li><ahref="http://www.duice.net/" >网店经营</a></li>
<li><ahref="http://www.duice.net/" >网络营销研究</a> </li>
</ul>
</div>
</body>
</html>