来源:flash,as,js兴趣爱好者Js导航条特效(鼠标移动，背景跟随)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为2款具有滑动效果的导航代码，属于flash技术网www.flash14.com，更多菜单导航代码请访问flash技术网www.flash14.comJS特效。" />
<title>2款具有滑动效果的导航代码_flash技术网www.flash14.com</title>
<style>
*{margin:0;padding:0}
body{font:14px Georgia}
header{padding:100px 0 0 0;display:block}
header h1{width:960px;margin:0 auto}
a{color:#eee}
a:hover{color:white}
.nav-wrap{margin:50px auto;background-color:#666;border-top:2px solid #000;border-bottom:2px solid #000}
/* Clearfix */
.group:after{visibility:hidden;display:block;content:"";clear:both;height:0}
*:first-child+html .group{zoom:1} /* IE7 */
/* Example One */
#example-one{margin:0 auto;list-style:none;position:relative;width:960px}
#example-one li{display:inline-block}
#example-one a{color:#bbb;font-size:14px;float:left;padding:6px 10px 4px 10px;text-decoration:none;text-transform:uppercase}
#example-one a:hover{color:white}
#magic-line{position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:#fe4902}
.current_page_item a{color:white !important}
.ie6 #example-one li, .ie7 #example-one li{display:inline}
.ie6 #magic-line {bottom:-3px}
/* Example Two */
#example-two{margin:0 auto;list-style:none;position:relative;width:960px}
#example-two li{display:inline-block}
#example-two li a{position:relative;z-index:200;color:#bbb;font-size:14px;display:block;float:left;padding:6px 10px 4px 10px;text-decoration:none;text-transform:uppercase}
#example-two li a:hover{color:white}
#example-two #magic-line-two{position:absolute;top:0;left:0;width:100px;background:#900;z-index:100;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.current_page_item_two a{color:white !important}
.ie6 #example-two li,.ie7 #example-two li{display:inline}
</style>
<script src='/function/js_function/jquery/jquery-1.7.2.js'></script>
<script src='/function/js_function/jquery/jquery.color-rgba-patch.js'></script><script src='/function/js_function/texiao/daohang/example.js'></script>
</head>
<body>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="http://www.lanrentuku.com" target="_blank">Home</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Buy Tickets</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Group Sales</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Reviews</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">The Show</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Videos</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Photos</a></li>
<li><a href="http://www.lanrentuku.com" target="_blank">Magic Shop</a></li>
</ul>
</div>
<div class="nav-wrap">
<ul class="group" id="example-two">
<li><a rel="#fe4902" href="http://www.lanrentuku.com" target="_blank">Home</a></li>
<li><a rel="#A41322" href="http://www.lanrentuku.com" target="_blank">Buy Tickets</a></li>
<li><a rel="#C6AA01" href="http://www.lanrentuku.com" target="_blank">Group Sales</a></li>
<li><a rel="#900" href="http://www.lanrentuku.com" target="_blank">Reviews</a></li>
<li><a rel="#D40229" href="http://www.lanrentuku.com" target="_blank">The Show</a></li>
<li class="current_page_item_two"><a rel="#98CEAA" href="http://www.lanrentuku.com" target="_blank">Videos</a></li>
<li><a rel="#1B9B93" href="http://www.lanrentuku.com" target="_blank">Photos</a></li>
<li><a rel="#8DC91E" href="http://www.lanrentuku.com" target="_blank">Magic Shop</a></li>
</ul>
</div>
<!-- 代码结束 -->
</body>
</html>
