<!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);