效果如下: (图一) (图二) 主要代码: <mce:script src="jquery-1.4.3.js" mce_src="jquery-1.4.3.js"></mce:script> <mce:script language="javascript"><!-- $(document).ready(function(){ var i; //($("div").children("ul").length/2) for(i=1;i<=5;i++)//------加载样式 { var main='#list'; var secand='#m' var tem; main=main+i; secand=secand+i; tem=secand; secand=secand+' > li'; $(main).addClass('list'); $(tem).addClass('ul-view'); $(secand).addClass('list-contnet'); } $('.list').hover(function(event){ //--------------------最上层列表事件 var temp=this.id; temp='#'+temp+' > ul'; $(this).addClass('butea'); // $(temp).removeClass('ul-view').addClass('ul-open')//没有任何效果的 $(temp).show('fast') },//function(){$('.ul-open').removeClass('ul-open').addClass('ul-view')});//没有任何效果的 function(event){var temp=this.id; temp='#'+temp+' > ul'; $(this).removeClass('butea'); $(temp).hide('fast')}); //-----------------------展开列表事件 $('.list-contnet').hover(function(){ $(this).addClass('list-over') },function(){$('li').removeClass('list-over')}); }); // --></mce:script> </head> <body> <div id="menu"> <ul > <li id="list1">menu1 <ul id="m1"> <li ><span>1.0</span></li> <li><span>1.1</span></li> <li><span>1.2</span></li> </ul> </li> </ul> <ul > <li id="list2">menu2 <ul id="m2"> <li><span><a href="#" mce_href="#">2.0</a></span></li> <li><span>2.1</span></li> <li><span>2.2</span></li> <li><span>2.3</span></li> </ul> </li> </ul> <ul > <li id="list3">menu3 <ul id="m3"> <li><span>3.0</span></li> <li><span>3.1</span></li> <li><span>3.2</span></li> <li><span>3.3</span></li> <li><span>3.4</span></li> </ul> </li> </ul> <ul > <li id="list4">menu4 <ul id="m4"> <li><span>4.0</span></li> <li><span>4.1</span></li> <li><span>4.2</span></li> </ul> </li> </ul> <ul > <li id="list5">menu5 <ul id="m5"> <li><span>5.0</span></li> <li><span>5.1</span></li> <li><span>5.2</span></li> </ul> </li> </ul> </div><br><br><div> <strong>This is a test example!</strong></div> </body>