<!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;100%; background:#f5f5f5; position:relative; border-bottom:1px solid #eeeeee;} .nav-left{ padding-left:127px; 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; 560px; line-height:39px;} .nav-right ul{100%;} .nav-right ul li{float:left;} .nav-right a{color:#6c6c6c;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{61px;} .nav-right .shopChat{83px;} .nav-right .favorites{65px;} .nav-right .goodType{69px;} .nav-right .sellerCenter{62px;} .nav-right .service{56px;} .nav-right .sitemap{76px;} .subnav{background:#fff;border:1px solid #eeeeee; border-top:0; line-height:25px; padding-left:4px;} .subnav a{color:#6c6c6c;} #subnav_1{81px; height:157px;position:absolute; top:42px; left:61%; z-index:2; display:none;} #subnav_2{80px; height:140px;position:absolute; top:42px; left:937px; z-index:2;display:none; } #subnav_3{75px; height:75px;position:absolute; top:42px; left:1020px; z-index:2; display:none;} #subnav_4{83px; height:124px;position:absolute; top:42px; left:1154px; z-index:2; display:none;} #subnav_5{90px; height:120px;position:absolute; top:42px; left:1254px; z-index:2; display:none;} .subnav li{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>