<!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>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="menu_left.js"></script>
<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.menu_left_box{ width:200px; border:1px #CC0000 solid}
.menu_left_box ul{ list-style:none; width:150px;}
.menu_left_box ul li{ list-style:none; line-height:25px; line-height:25px; position: relative;}
.menu_left_box ul li ul{ position:absolute; width:200px; border:1px #CC0000 solid; left:142px; top:0px; z-index: 999999; display:none; background-color:#FFFFFF}
.menu_left_box ul li ul li{list-style:none; line-height:25px; line-height:25px;}
.menu_left2_tit{line-height:25px;height:25px; background-color:#6699FF; width:200px;}
.menu_left_tit{line-height:25px;height:25px; background-color:#ff0000; width:200px;}
</style>
</head> <body>
<div class="menu_left_box">
<ul>
<li><a href="#">栏目一</a>
<ul><li >栏目一>>122</li>
<li>栏目一>>1</li>
<li>栏目一>>1</li>
</ul>
</li>
<li><a href="#">栏目二</a><ul><li>栏目二>>2</li>
<li>栏目二>>3</li>
<li>栏目二>>4</li>
</ul></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(".menu_left_box ul li").menu_left();
});
</script>
只是用简单的线条，如果想加特效，可以修改CSS
插件部分 同理，如果想更多的效果，可以自行修改
(function($){
$.fn.menu_left=function(){
$(this).hover(function(){
num=$(this).index(this);
$(this).eq(num).addClass("menu_left_tit")
$(this).find("ul").show();
$(this).find("ul li").hover(function(){
index=$(this).index(this);
$(this).eq(index).addClass("menu_left2_tit");
},function(){
$(this).eq(index).removeClass("menu_left2_tit");
});
},function(){
$(this).eq(num).removeClass("menu_left_tit")
$(this).find("ul").hide();
});
}
})(jQuery);