<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//不引入jQuery，用原生代码实现特效
// var a = document.getElementsByClassName("item");
// for(var i = 0 ; i < a.length ; i++){
// a[i].onmouseenter = function(e){
// this.className +=" "+"layer";
// }
// a[i].onmouseleave = function(e){
// this.className = this.className.replace(" layer","");
// }
// }
//引入jQuery，实现特效
$(".product_sort .bd .item").hover(function(){
$(this).addClass("layer");
},function(){
$(this).removeClass("layer");
});
</script>
</body>
</html>
静态文件而已，代码非常简单，copy下来即可。需要注意的是，js代码嵌入其中，其中用了两个方法实现，原生js方法和引入jQuery方法实现。
CSS代码：
*{
margin:0;
padding:0;
list-style: none;
text-decoration:none;
}
/*旅游产品分类*/
.product_sort{
margin:20px;
width:226px;
height:644px;
background:#fff url(../images/img_226x95.jpg) no-repeat left bottom;
border:solid 1px #3299fd;
position:relative;
z-index:90;
}
.product_sort .hd{
width:226px;
background:url(../images/img_226x40.jpg) no-repeat;
height:40px;
line-height:40px;
text-indent:15px;
font-size:15px;
font-weight:bold;
font-family:"微软雅黑";
color:#fff;
}
.product_sort .bd{
padding-bottom:10px;
}
.product_sort .bd .item{
border-bottom:solid 1px #3299fd;
height:60px;
position:relative;
}
.product_sort .bd .item .title{
width:226px;
text-indent:43px;
height:30px;
overflow:hidden;
line-height:42px;
