<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝导航菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;}
ul{list-style-type:none;}
#nav{height:42px;font-size:12px;width:100%; background:#f5f5f5; position:relative; border-bottom:1px solid #eeeeee;}
.nav-left{ padding-left:127px; width:225px; line-height:42px; float:left;}
.nav-left a.sign{color:#f22e00;}
.nav-left a.register{color:#6c6c6c;}
.nav-left a.register:hover{color:#ff4400;}
.nav-right{float:right; width:560px; line-height:39px;}
.nav-right ul{width:100%;}
.nav-right ul li{float:left;}
.nav-right a{color:#6c6c6c;width:100%;display:block; float:left; margin-top:4px; text-align:center;}
.nav-right .title:hover{border:1px solid #eeeeee; color:#ff4400;border-bottom:0; background:#fff;}
.nav-right .title2:hover{color:#ff4400;}
.nav-right .taobao{width:61px;}
.nav-right .shopChat{width:83px;}
.nav-right .favorites{width:65px;}
.nav-right .goodType{width:69px;}
.nav-right .sellerCenter{width:62px;}
.nav-right .service{width:56px;}
.nav-right .sitemap{width:76px;}
.subnav{background:#fff;border:1px solid #eeeeee; border-top:0; line-height:25px; padding-left:4px;}
.subnav a{color:#6c6c6c;}
#subnav_1{width:81px; height:157px;position:absolute; top:42px; left:61%; z-index:2; display:none;}
#subnav_2{width:80px; height:140px;position:absolute; top:42px; left:937px; z-index:2;display:none; }
#subnav_3{width:75px; height:75px;position:absolute; top:42px; left:1020px; z-index:2; display:none;}
#subnav_4{width:83px; height:124px;position:absolute; top:42px; left:1154px; z-index:2; display:none;}
#subnav_5{width:90px; height:120px;position:absolute; top:42px; left:1254px; z-index:2; display:none;}
.subnav li{width:100%;}
</style>
</head>
<body>
<div id="nav">
<div class="nav-left">
<p><a class="sign" href="javascript:;">亲，请登录</a>
<a class="register" href="javascript:;">免费注册</a>
<a class="register" href="javascript:;">手机逛淘宝</a>
</p>
</div>
<div class="nav-right">
<ul id="ul-nav">
<li class="taobao">
<a class="title" href="javascript:;">我的淘宝</a>
<div class="subnav" id="subnav_1">
<ul>
<li><a href="javascript:;">已买到的宝贝</a></li>
<li><a href="javascript:;">我的足迹</a></li>
<li><a href="javascript:;">我的上新</a></li>
<li><a href="javascript:;">我的优惠</a></li>
<li><a href="javascript:;">我的小分队</a></li>
</ul>
</div>
</li>
<li class="shopChat">
<a class="title" href="javascript:;">购物车</a>
<div class="subnav" id="subnav_2">
<ul>
<li><a href="javascript:;">用品工具</a></li>
<li><a href="javascript:;">新疆大枣</a></li>
<li><a href="javascript:;">光明奶粉</a></li>
<li><a href="javascript:;">空白明信片</a></li>
<li><a href="javascript:;">化妆工具</a></li>
</ul>
</div>
</li>
<li class="favorites">
<a class="title" href="javascript:;">收藏夹</a>
<div class="subnav" id="subnav_3">
<ul>
<li><a href="javascript:;">收藏的宝贝</a></li>
<li><a href="javascript:;">收藏的店铺</a></li>
</ul>
</div>
</li>
<li class="goodType">
<a class="title2" href="javascript:;">商品分类</a>
</li>
<li class="sellerCenter">
<a class="title" href="javascript:;">卖家中心</a>
<div class="subnav" id="subnav_4">
<ul>
<li><a href="javascript:;">已卖出的宝贝</a></li>
<li><a href="javascript:;">出售中的宝贝</a></li>
<li><a href="javascript:;">卖家服务市场</a></li>
<li><a href="javascript:;">卖家培训中心</a></li>
</ul>
</div>
</li>
<li class="service"><a class="title2" href="javascript:;">联系客服</a></li>
<li class="sitemap">
<a class="title" href="javascript:;">网站导航</a>
<div class="subnav" id="subnav_5">
<ul>
<li><a href="javascript:;">阿里旺旺</a></li>
<li><a href="javascript:;">支付宝</a></li>
<li><a href="javascript:;">爱淘宝</a></li>
<li><a href="javascript:;">星店</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var timer = null;
var i= 0 ;
$("#ul-nav").children().each(function(){
var oSubnav = $(this).find("div");
$(this).hover(function(){
oSubnav.show();
},function(){ oSubnav.hide()});
});
</script>
</body>
</html>
