最近看了些网上的各类导航网站源码，自己学习制作了一个仿苏宁易购的导航栏
jQuery部分代码
$(function(){
$(".CategoryTree>ul>li").hover(function(index){
var obj=$(this).offset();
var xobj=obj.left+240+"px";
var yobj=$(this).index()*(-$(this).height()-1)+"px";
$(this).addClass("selected");
$(this).children("e:eq(0)").addClass("h2-tit");
$(this).css("background","#856F62").siblings().css("background","#FFFFFF");
$(this).children(".tit").children("p").css("color","white");
$(this).children(".content").css({"left":xobj,"top":yobj}).show();
},function(){
$(this).removeClass("selected");
$(this).children(".tit").removeClass("h2-tit");
$(this).children(".tit").children("p").css("color","#999");
$(this).children(".tit").children("span").css("color","black");
$(this).children(".content").hide();
})
})
Css部分代码
.ColLeft { width:241px;background:#fff;padding:;margin:;}
.CategoryTree{ border:1px solid #ccc;height:482px;}
.CategoryTree .titlebar { width:240px;height:30px;background-color:rgb(255,138,21);}
.CategoryTree .titlebar h3{margin:;padding:;line-height:30px;font-size:"宋体";font-size:16px;font-weight:bold;letter-spacing:0.1em;color:#FFF;margin-left:15px;}
.CategoryTree ul{padding:;width:240px;height:auto;}
.CategoryTree ul li { height:50px; padding:0 10px; position:relative;vertical-align:middle; cursor:pointer;z-index:;display:block;font-family:"宋体";font-size:12px;letter-spacing:0.1em;border-bottom:1px #e4e4e4 solid;}
.CategoryTree ul li .tit{display:block;margin-left:5px;padding-top:5px;color:#999;}
.CategoryTree ul li .tit span{ font-weight:bold;color:#000;}
.CategoryTree ul li .content{ position:absolute;width:700px;height:457px;background:#fff;border:1px solid #e6e6e6;display:none;z-index:;margin-left:-1px;}
.CategoryTree ul li .content .cleft{ width:500px;height:457px; float:left;}
.CategoryTree ul li .content .cright{ width:190px;height:457px; float:right;}
.CategoryTree ul li.selected{z-index:; position:relative; }
.CategoryTree ul li.selected .h2-tit{position:absolute; z-index:;background:#fff;border:1px #666 solid; border-bottom:3px #666 solid; border-right:;width:170px;height:24px;line-height:24px; padding-left:2px;margin-left:-4px;}
HTML部分代码
<div class="main">
<div class="ColLeft">
<div class="CategoryTree">
<div class="titlebar"><h3>全部商品分类</h3></div>
<ul>
<li>
<a class="tit"><p><span>手机 相机 电脑</span><br />合约机 笔记本 单反 DIY 微单</p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>办公 影音 配件</span><br />路由器 存储卡 打印 耳机 U盘<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>家用电器 小家电</span><br />电视 冰箱 洗衣机 空调 取暖器<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>母婴 玩具</span><br />奶粉 纸尿裤 喂养 辅食 玩具<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>护肤 洗护</span><br />洁面 护肤 彩妆 洗发 沐浴<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>服装馆 箱包 汽车用品</span><br />男装 男包 钟表 珠宝 运动户外<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>居家 美食</span><br />家纺 家装建材 厨具 酒水 清洁<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>图书 电子书</span><br />教育 历史 育儿 小说 儿童书<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
<li>
<a class="tit"><p><span>游戏 充值 旅行 彩票</span><br />保险 酒店 生活缴费 礼品卡<p></a>
<div class="content">
<div class="cleft"></div>
<div class="cright"></div>
</div>
</li>
</ul>
</div>
</div>