为什么是简易版?
因为没有加入国际版阿里巴巴分类栏根据窗口大小调整位置的功能。
style.css
#sorts-list {
position: absolute;
width: 150px;
border:1px solid #aaa;
}
#sorts-list .fore {
height:40px;
line-height:40px;
background:#eee;
}
#sorts-list .fore a {
text-decoration:none;
color:#03c;
padding-left: 20px;
font-size:18px;
font-weight:400;
font-family:Tahoma;
}
#sorts-list .item {
width: 150px;
height: 30px;
margin:0;
padding:0;
border: solid #eee;
border-width:1px 0 0 0;
}
#sorts-list .item span {
position:relative;
top:4px;
height:20px;
display:block;
width: 140px;
background:#fff;
}
#sorts-list .item .background-img {
width:8px;
height:20px;
float:right;
margin-right:0px;
background-image:url(images/other.png);
background-repeat:no-repeat;
background-attachment:scroll;
}
#sorts-list .item a {
width: 150px;
height: 20px;
padding-left: 20px;
line-height: 20px;
text-decoration:none;
color:#333;
font-size:12px;
font-family:Tahoma;
}
#sorts-list .item .sorts-subs {
display:none;
position: absolute;
left: 140px;
top: 0;
width: 160px;
border:solid #aaa;
border-width:1px 1px 1px 1px;
background:#fff;
}
#sorts-list .item .sorts-subs div {
height: 20px;
}
#sorts-list .hover span {
z-index:3;
border:#aaa solid;
border-width:1px 0 1px 1px;
}
#sorts-list .hover span a {
color:#3a91e7;
text-decoration:underline;
}
#sorts-list .hover .background-img {
margin-right:5px;;
}
#sorts-list .hover .sorts-subs {
z-index:2;
}
#sorts-list .hover .sorts-subs a:hover {
color:#3a91e7;
text-decoration:underline;
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<div id="left-banner">
<div id="sorts-list">
<div class="fore">
<a href="#">Categories</a>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:45px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:76px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:107px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:138px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:169px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:200px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
<div class="item">
<span>
<div class="background-img"></div>
<a href="#">Agriculture</a>
</span>
<div class="sorts-subs" style="top:231px">
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
<div>
<a href="#">Agriculture</a>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".item span").hover(
function() {
$(this).next().css("display","block");
$(this).parent().addClass("hover");
},
function() {
$(this).next().css("display","none");
$(this).parent().removeClass("hover");
});
$(".sorts-subs").hover(
function() {
$(this).css("display","block");
$(this).parent().addClass("hover");
},
function() {
$(this).css("display","none");
$(this).parent().removeClass("hover");
});
});
</script>
</body>
</html>