<!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=utf-8" />
<title>jquery導航選單二級選單slide滑動漸隱顯示</title>
<meta name="description" content="jquery導航選單製作一個二級選單導航條，滑鼠滑過導航條二級選單slide滑動展示且帶有漸隱效果展示比較柔和的二級選單目錄。jQuery下載" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋體",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:39px;left:6px;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>
<script type="text/javascript" src="http://www.jsfoot.com/skinnew/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function dropMenu(obj){
$(obj).each(function(){
var theSpan = $(this);
var theMenu = theSpan.find(".submenu");
var tarHeight = theMenu.height();
theMenu.css({height:0,opacity:0});
theSpan.hover(
function(){
$(this).addClass("selected");
theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
},
function(){
$(this).removeClass("selected");
theMenu.stop().animate({height:0,opacity:0},400,function(){
$(this).css({display:"none"});
});
}
);
});
}
$(document).ready(function(){
dropMenu(".drop-menu-effect");
});
</script>
<div class="navbox">
<div class="nav">
<ul class="clearfix">
<li><a class="selected" target="_blank" href="http://www.jsfoot.com/"><span>網站首頁</span></a></li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.jsfoot.com/jquery/"><span>jquery程式碼</span></a>
<ul class="submenu">
<li><a href="http://www.jsfoot.com/jquery/images/">jquery圖片特效</a></li>
<li><a href="http://www.jsfoot.com/jquery/menu/">jquery導航選單</a></li>
<li><a href="http://www.jsfoot.com/jquery/xxk/">jquery選項卡特效</a></li>
<li><a href="http://www.jsfoot.com/jquery/xxk/">jquery文字特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.jsfoot.com/jquery/images/"><span>jquery圖片特效</span></a>
<ul class="submenu">
<li><a href="http://www.jsfoot.com/jquery/images/qh/">jquery圖片切換</a></li>
<li><a href="http://www.jsfoot.com/jquery/images/hdp/">jquery幻燈片</a></li>
<li><a href="http://www.jsfoot.com/jquery/images/cj/">jquery圖片滾動</a></li>
<li><a href="http://www.jsfoot.com/jquery/images/fdj/">jquery圖片放大鏡</a></li>
<li><a href="http://www.jsfoot.com/jquery/images/gg/">jquery廣告</a></li>
<li><a href="http://www.jsfoot.com/jquery/images/more/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.jsfoot.com/jquery/menu/"><span>jquery導航選單</span></a>
<ul class="submenu">
<li><a href="http://www.jsfoot.com/jquery/menu/dh/">jquery動畫選單</a></li>
<li><a href="http://www.jsfoot.com/jquery/menu/sx/">jquery樹形選單</a></li>
<li><a href="http://www.jsfoot.com/jquery/menu/xl/">jquery下拉選單</a></li>
<li><a href="http://www.jsfoot.com/jquery/menu/yj/">jquery右鍵選單</a></li>
<li><a href="http://www.jsfoot.com/jquery/menu/more/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.jsfoot.com/jquery/xxk/"><span>jquery選項卡特效</span></a>
<ul class="submenu">
<li><a href="http://www.jsfoot.com/jquery/xxk/qh/">jquery選項卡切換</a></li>
<li><a href="http://www.jsfoot.com/jquery/xxk/hd/">jquery滑動選項卡</a></li>
<li><a href="http://www.jsfoot.com/jquery/xxk/more/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.jsfoot.com/jquery/xxk/"><span>jquery文字特效</span></a>
<ul class="submenu">
<li><a href="http://www.jsfoot.com/jquery/letter/gd/">jquery文字滾動</a></li>
<li><a href="http://www.jsfoot.com/jquery/letter/ss/">jquery文字閃爍</a></li>
<li><a href="http://www.jsfoot.com/jquery/letter/qh/">jquery文字切換</a></li>
<li><a href="http://www.jsfoot.com/jquery/letter/sl/">jquery文字數量</a></li>
<li><a href="http://www.jsfoot.com/jquery/letter/gb/">jquery文字改變</a></li>
<li><a href="http://www.jsfoot.com/jquery/letter/more/">jquery更多特效</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>