<!DOCTYPE html>
<html xmlns="http://www.shaxiangift.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery黑色橫向二級導航</title>
<script src="jquery.min.js"type="text/javascript"></script>
</head>
<style type="text/css">
html *{padding:0;margin:0;font-family:Arial, Verdana, Helvetica, sans-serif;}
.nav{margin-top:200px;}
.nav *{text-decoration:none;font-size:9pt;}
.nav * a:hover{background-color:#82ce18;/* 鼠標經(jīng)過(guò)時(shí)的紅色背景，可自定義 */}
.menu{list-style:none;height:40px;width:100%;background-color:#333;margin-top:200px;}
.nav{list-style:none;height:40px;width:900px;margin:0auto;background-color:#333;}
.nav li{float:left;border-left:1px solid#4a4a4a;border-right:1px solid #242424;border-top:1px solid #4a4a4a;border-bottom:1pxsolid #242424;position:relative;}
.nav lia{color:#fff;height:38px;line-height:38px;font-weight:bold;padding:020px;blr:expression(this.onFocus=this.close());blr:expression(this.onFocus=this.blur());display:inline-block;}
.nav li a:focus{-moz-outline-style: none; }
.nav li.sub-nav{position:absolute;top:39px;left:-1px;list-style:none;background-color:#333;display:none;}
.nav li .sub-navli{text-align:center;clear:left;width:140px;height:35px;line-height:35px;position:relative;}
.nav li .sub-nav lia{height:34px;line-height:34px;width:138px;padding:0;display:inline-block;}
</style>
<scripttype="text/javascript">
$(function(){
$(".nav>li").hover(function(){
$(this).children('ul').stop(true,true).show(300);
},function(){
$(this).children('ul').stop(true,true).hide(300);
})
})
</script>
<body>
<div id="content">
<br><br><br>
<!--DEMO start-->
<divclass="menu">
<ulclass="nav">
<li><ahref="#">jQuery特效</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
<li><ahref="#">Jquery學(xué)堂</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
<li><ahref="#">資料庫</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
<li><ahref="#">QQ群堂</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
<li><ahref="#">TAGS標簽</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
<li><ahref="#">在線(xiàn)留言</a>
<ulclass="sub-nav">
<li><ahref="#">Jquery插件</a></li>
<li><ahref="#">Jquery學(xué)堂</a></li>
<li><ahref="#">資料庫</a></li>
<li><ahref="#">QQ群堂</a></li>
<li><ahref="#">TAGS標簽</a></li>
<li><ahref="#">在線(xiàn)留言</a></li>
</ul>
</li>
</ul>
</div>
<!--DEMO end-->
</div>
<divstyle="text-align:center;">
<p>更多源碼：<a > </a></p>
</div>
</body>
</html>
聯(lián)系客服
