<!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