找的仿天貓?jiān)创a效果差不多，沒有JQuery自己加一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery仿天貓分類菜單代碼 </title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
/* background: #f4f4f4;*/
background: #e3e3e3;
font: 16px Microsoft YaHei, arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
}
.containor {
width: 1000px;
height: auto;
position: relative;
margin: 0 auto;
top: 50px;
}
.nav_left {
width: 200px;
height: 500px;
background: #FF0036;
}
.nav_left ul {
width: 100%;
height: auto;
}
.nav_left ul li {
height: 50px;
line-height: 50px;
text-align: left;
}
.nav_left ul li span {
padding-left: 10px;
height: 50px;
line-height: 50px;
display: block;
background: #FF0036;
color: #fff;
}
.nav_left ul li span:hover {
color: #FF0036;
background: #FFFFFF;
}
.nav_right {
width: 800px;
height: 500px;
position: absolute;
margin-left: 200px;
top: 0px;
}
.sub {
position: relative;
overflow: hidden;
width: 100%;
height: 480px;
background: #FFFFFF;
padding: 10px 0px;
}
.sub dl {
overflow: hidden;
padding: 0px 0px 10px 0px;
}
.sub dt {
width: 100px;
float: left;
display: block;
position: relative;
clear: left;
}
.sub dt a {
font-size: 14px;
color: #000;
font-weight: bold;
text-align: center;
padding-left: 20px;
text-decoration: none;
cursor: pointer;
}
.sub dt i {
width: 4px;
right: 12px;
top: 2px;
font-size: 14px;
position: absolute;
font-style: normal;
}
.sub dd {
width: 680px;
float: left;
display: block;
position: relative;
overflow: hidden;
padding-right: 20px;
border-bottom: 1px dashed #E3E3E3;
}
.sub dd a {
font-size: 12px;
float: left;
color: #666;
padding: 0 10px;
margin: 4px 0px 10px 0px;
text-decoration: none;
cursor: pointer;
border-left: 1px solid #E3E3E3;
}
.sub dd a:hover {
color: #FF0036;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/style.js" ></script>
<script>
$(function() {
$('.containor').on('mouseenter', function() {
$(".nav_right").removeClass('hide');
}).on('mouseleave', function() {
$(".nav_right").addClass('hide');
$(".sub").addClass('hide');
}).on('mouseenter', 'li', function(e) {
var li_data = $(this).attr('data-id');
$(".sub").addClass('hide');
$('.sub[data-id="' + li_data + '"]').removeClass('hide');
})
})
</script>
</head>
<body>
<div class="containor">
<div class="nav_left">
<ul>
<li data-id="1"> <span>美妝/個(gè)人護(hù)理</span></li>
<li data-id="2"> <span>手機(jī) /數(shù)碼 /電腦辦公</span></li>
<li data-id="3"> <span>零食 /茶酒 /進(jìn)口食品 </span></li>
<li data-id="4"> <span>母嬰玩具 </span></li>
<li data-id="5"> <span>腕表 /眼鏡 /珠寶飾品 </span></li>
<li data-id="6"> <span>大家電 /生活電器 </span></li>
<li data-id="7"> <span>廚具 /收納 /寵物? </span></li>
<li data-id="8"> <span>汽車 /配件 /用品? </span></li>
<li data-id="9"> <span>生鮮水果? </span></li>
<li data-id="10"> <span>家紡 /家飾 /鮮花? ?</span></li>
</ul>
</div>
<div class="nav_right">
<div class="sub hide" data-id="1">
<dl>
<dt><a >護(hù)膚品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
</dd>
</dl>
<dl>
<dt><a >彩妝 <i> ></i></a> </dt>
<dd>
<a>時(shí)尚彩妝</a>
<a>香水</a>
<a>氣墊護(hù)膚</a>
<a>BB霜</a>
<a>口紅</a>
<a>隔離</a>
<a>粉底</a>
<a>粉餅</a>
</dd>
</dl>
<dl>
<dt><a >男士護(hù)膚 <i> ></i></a> </dt>
<dd>
<a>潔面爽</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>膚水乳液/面霜</a>
<a>精華液</a>
<a>眼部護(hù)理</a>
<a>面膜</a>
<a>唇部護(hù)理</a>
<a>防曬</a>
<a>精華液</a>
<a>T區(qū)護(hù)理控油</a>
</dd>
</dl>
<dl>
<dt><a >護(hù)膚品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
</dd>
</dl>
<dl>
<dt><a >彩妝 <i> ></i></a> </dt>
<dd>
<a>時(shí)尚彩妝</a>
<a>香水</a>
<a>氣墊護(hù)膚</a>
<a>BB霜</a>
<a>口紅</a>
<a>隔離</a>
<a>粉底</a>
<a>粉餅</a>
</dd>
</dl>
<dl>
<dt><a >男士護(hù)膚 <i> ></i></a> </dt>
<dd>
<a>潔面爽</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>膚水乳液/面霜</a>
<a>精華液</a>
<a>眼部護(hù)理</a>
<a>面膜</a>
<a>唇部護(hù)理</a>
<a>防曬</a>
<a>精華液</a>
<a>T區(qū)護(hù)理控油</a>
</dd>
</dl>
<dl>
<dt><a >男士護(hù)膚 <i> ></i></a> </dt>
<dd>
<a>潔面爽</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>膚水乳液/面霜</a>
<a>精華液</a>
<a>眼部護(hù)理</a>
<a>面膜</a>
<a>唇部護(hù)理</a>
<a>防曬</a>
<a>精華液</a>
<a>T區(qū)護(hù)理控油</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="2">
<dl>
<dt><a >電腦辦公 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="3">
<dl>
<dt><a >進(jìn)口食品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>餅干</a>
<a>海苔</a>
<a>火腿腸</a>
<a>方便面</a>
<a>果凍</a>
<a>水果干</a>
<a>堅(jiān)果</a>
<a>面包蛋糕</a>
<a>華夫餅</a>
<a>進(jìn)口巧克力</a>
<a>進(jìn)口咖啡</a>
<a>進(jìn)口葡萄酒</a>
<a>啤酒飲料</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="4">
<dl>
<dt><a >母嬰玩具 <i> ></i></a> </dt>
<dd>
<a>童裝</a>
<a>秋換新</a>
<a>商場(chǎng)同款</a>
<a>特價(jià)優(yōu)惠</a>
<a>秋衣秋褲</a>
<a>外套</a>
<a>羽絨服</a>
<a>夾克</a>
<a>連衣裙</a>
<a>褲子</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="5">
<dl>
<dt><a >珠寶飾品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="6">
<dl>
<dt><a >生活電器 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>生活電器</a>
<a>生活電器</a>
<a>吹風(fēng)機(jī)</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
<a>官方直售</a>
<a>面膜</a>
<a>護(hù)膚套裝</a>
<a>乳液面霜</a>
<a>精華液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="7">
<dl>
<dt><a >廚具 <i> ></i></a> </dt>
<dd>
<a>廚具</a>
<a>廚具</a>
<a>油煙機(jī)</a>
<a>洗碗機(jī)</a>
<a>電磁爐</a>
<a>微波爐</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="8">
<dl>
<dt><a >汽車 <i> ></i></a> </dt>
<dd>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
<a>汽車</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="9">
<dl>
<dt><a >生鮮水果 <i> ></i></a> </dt>
<dd>
<a>火龍果</a>
<a>蘋果</a>
<a>榴蓮</a>
<a>進(jìn)口水果</a>
<a>優(yōu)惠活動(dòng)</a>
<a>雪梨</a>
<a>山竹</a>
<a>葡萄</a>
<a>泰國(guó)芒果</a>
<a>柚子</a>
<a>馬蹄</a>
<a>橘子</a>
<a>香蕉</a>
<a>獼猴桃</a>
<a>椰子</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="10">
<dl>
<dt><a >當(dāng)季熱賣 <i> ></i></a> </dt>
<dd>
<a>定制窗簾</a>
<a>抱枕</a>
<a>被子</a>
<a>兩用坐墊</a>
<a>國(guó)際家紡床品</a>
<a>國(guó)際居家布藝</a>
<a>國(guó)際家居飾品</a>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
