<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>横向二级导航</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<style type="text/css">
html *{
padding:0;
margin:0;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.top-menu *{
text-decoration:none;
font-size:9pt;
}
.top-menu * a:hover{
background-color:#801818;/* 鼠标经过时的红色背景，可自定义 */
}
.top-menu{
list-style:none;
height:40px;
100%;
background-color:#333;
}
.top-menu 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;
}
.top-menu li a{
color:#fff;
height:38px;
line-height:38px;
padding:0 20px;
blr:expression(this.onFocus=this.close());
blr:expression(this.onFocus=this.blur());
display:inline-block;
}
.top-menu li a:focus{
-moz-outline-style: none;
}
.top-menu li .sub-menu{
position:absolute;
top:39px;
left:-1px;
list-style:none;
background-color:#333;
display:none;
}
.top-menu li .sub-menu li{
text-align:center;
clear:left;
140px;
height:35px;
line-height:35px;
position:relative;
}
.top-menu li .sub-menu li a{
height:34px;
line-height:34px;
138px;
padding:0;
display:inline-block;
}
</style>
<script>
$(function(){
$(".top-menu>li").hover(function(){
$(this).children('ul').stop(true,true).show(500);
},function(){
$(this).children('ul').stop(true,true).hide(500);
})
})
</script>
<body>
<ul class="top-menu">
<li><a href="#">站点首页</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
<li><a href="#">精彩日志</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
<li><a href="#">图说天下</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
<li><a href="#">空间申请</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
<li><a href="#">新闻热点</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
<li><a href="#">编不出来啦！</a>
<ul class="sub-menu">
<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>
<li><a href="#">编不出来啦！</a></li>
</ul>
</li>
</ul>
</html>
更多阅读请访问http://www.hopean.com