jquery黑色超级漂亮的横向二级导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery黑色横向二级导航 - 16素材网</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;/* 鼠标经过时的红色背景，可自定义 */
}
.menu{
list-style:none;
height:40px;
width:100%;
background-color:#333;
margin-top:200px;
}
.nav{
list-style:none;
height:40px;
width:900px;
margin:0 auto;
background-color:#333;
}
.nav li{
float:left;
border-left:1px solid #4a4a4a;
border-right:1px solid #242424;
border-top:1px solid #4a4a4a;
border-bottom:1px solid #242424;
position:relative;
}
.nav li a{
color:#fff;
height:38px;
line-height:38px;
font-weight:bold;
padding:0 20px;
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-nav li{
text-align:center;
clear:left;
width:140px;
height:35px;
line-height:35px;
position:relative;
}
.nav li .sub-nav li a{
height:34px;
line-height:34px;
width:138px;
padding:0;
display:inline-block;
}
</style>
<script>
$(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-->
<div class="menu">
<ul class="nav">
<li><a href="http://www.16sucai.com/">JquerySchool</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
<li><a href="http://www.16sucai.com/">学习资料库</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
<li><a href="http://www.16sucai.com/">QQ群堂</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
<li><a href="http://www.16sucai.com/">TAGS标签</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
<li><a href="http://www.16sucai.com/">在线留言</a>
<ul class="sub-nav">
<li><a href="http://www.16sucai.com/">Jquery插件</a></li>
<li><a href="http://www.16sucai.com/">Jquery学堂</a></li>
<li><a href="http://www.16sucai.com/">学习资料库</a></li>
<li><a href="http://www.16sucai.com/">QQ群堂</a></li>
<li><a href="http://www.16sucai.com/">TAGS标签</a></li>
<li><a href="http://www.16sucai.com/">在线留言</a></li>
</ul>
</li>
</ul>
</div>
<!--DEMO end-->
</div>
<br><br><br><br><br><br><br><br><br>
<p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>
<p align="center">来源：<a href="http://www.16sucai.com/" target="_blank">16素材网</a></p>
</body>
</html>
浙公网安备 33010602011771号