jsp 界面问题 如何做出二级子菜单？

最近因为要做二级子菜单，所以在网上搜索，找到的大都是纯js控制或者js+css，但只有1级下拉菜单，我不知道如何把它改成有二级子菜单的，所以特来请教。我倾向于用js+css做，因为纯js代码太长，function太多，不便于阅读理解。但我不知道两种做法有什么区别？哪种比较好以下是js+css的代码<%@page language="java" contentType="text/html; charset=UTF-8"%><STYLE>
BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: white; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: white
}
UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
    DISPLAY: inline; FONT-WEIGHT: bold; LIST-STYLE-POSITION: outside; FLOAT: left; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
A:link {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 100px; COLOR: #336601; PADDING-TOP: 3px; TEXT-DECORATION: none
}
A:visited {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 100px; COLOR: #336601; PADDING-TOP: 3px; TEXT-DECORATION: none
}
A:hover {
    PADDING-RIGHT: 3px; PADDING-LEFT: 20px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: white; PADDING-TOP: 3px; BACKGROUND-COLOR: #539d26; TEXT-DECORATION: none
}
A:active {
    PADDING-RIGHT: 3px; PADDING-LEFT: 20px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 88px; COLOR: white; PADDING-TOP: 3px; BACKGROUND-COLOR: #bd06b4; TEXT-DECORATION: none
}
#nav {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 1; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 600px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 30px
}
.list {
    PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-WEIGHT: normal; PADDING-BOTTOM: 4px; LINE-HEIGHT: 20px; PADDING-TOP: 4px; TEXT-ALIGN: left
}
.menu1 {
    BORDER-RIGHT: #9cdd75 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #9cdd75 1px solid; OVERFLOW-Y: hidden; PADDING-LEFT: 0px; FILTER: Alpha(opacity=70); PADDING-BOTTOM: 0px; MARGIN: 6px 4px 0px 0px; BORDER-LEFT: #9cdd75 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #336601; PADDING-TOP: 6px; BORDER-BOTTOM: #9cdd75 1px solid; HEIGHT: auto; BACKGROUND-COLOR: #f1fbec; -moz-opacity: 0.7;opacity: 0.7;
}
.menu2 {
    BORDER-RIGHT: #eee8dd 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #eee8dd 1px solid; OVERFLOW-Y: hidden; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 6px 4px 0px 0px; BORDER-LEFT: #eee8dd 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #999999; PADDING-TOP: 6px; BORDER-BOTTOM: #eee8dd 1px solid; HEIGHT: 23px; BACKGROUND-COLOR: #f5f5f5
}
</STYLE>
<BODY>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<DIV id=nav style="top: 20px; height: 43px; left: 11px; width: 557px;">
<UL>
  <LI class=menu2 onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">我的首页 
  <DIV class=list><a href="http://www.ybj86.cn" target="_blank">我的CHINAY</a><br>
<a href="http://www.ybj86.cn" target="_blank" >我的首页</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的日志</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的日志</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的相册</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的收藏</a><br></DIV></LI>
  <LI class=menu2 onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">社区圈子 
  <DIV class=list><a href="http://www.ybj86.cn" target="_blank">我的CHINaY</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的首页</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的日志</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的相册</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的收藏</a><BR></DIV></LI>
  <LI class=menu2 onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">我的短信 
  <DIV class=list><a href="http://www.ybj86.cn" target="_blank">我的CHINaY</a><br>
  <a href="http://www.ybj86.cn" target="_blank">我的相册</a><br>
    <a href="http://www.ybj86.cn" target="_blank">我的收藏</a><BR></DIV></LI>
  <LI class=menu2 onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">账户管理 
  <DIV class=list><a href="http://www.ybj86.cn" target="_blank">我的CHINaY</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的首页</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的日志</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的相册</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的收藏</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的日志</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的相册</a><br>
<a href="http://www.ybj86.cn" target="_blank">我的收藏</a><br></DIV></LI></UL></DIV>
<DIV 
style="PADDING-RIGHT: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 50px">
<script type=text/javascript>
document.writeln("<style type=\'text\/css\'>");
document.writeln("#mycopy,#mycopy * { font:12px Arial; font-size:12px!important; color:#333; text-decoration:none;}");
document.writeln("#mycopy a { display:inline; padding:0; margin:0;}");
document.writeln("#mycopy a#name { font-family:Arial;}");
document.writeln("#mycopy a#name:hover,#mycopy a#domain:hover { color:#f60; text-decoration:underline;}");
document.writeln("<\/style>");var lastdate=new Date(document.lastModified);
    Y=lastdate.getYear();
    Ho=lastdate.getHours();
    Mi=lastdate.getMinutes();
    Se=lastdate.getSeconds();
if (Number(Y)<100) Y="20"+Y;
    M=Number(lastdate.getMonth())+1;
    D=lastdate.getDate();
document.writeln("<a href=http://www.ybj86.cn id=domain target=_blank>");//<a href="http://www.ybj86.cn" target="_blank">http://www.ybj86.cn</a></a> -");
document.writeln("Update: "+Y+" "+M+"."+D+" "+Ho+"."+Mi+"."+Se);
document.writeln("</p>");
</script>
<script>
function showSub()
{
alert("ok");
}
</script>
</DIV></BODY>

解决方案 »

  1.   

    此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
    楼主【veardn】截止到2008-06-25 10:23:31的历史汇总数据(不包括此帖)：
    发帖数:7                  发帖分:180                
    结贴数:5                  结贴分:140                
    未结数:2                  未结分:40                 
    结贴率:71.43 %            结分率:77.78 %            
    楼主加油
      

  2.   

    楼主的应该是树形菜单，可以参考CSDN左边的树。
    展开树的每个节点其实是2个东西，一个是+或-的图片，另外一个是文件夹型图片。
    点+或-仅仅做树展开操作，点文件夹型图片才是链接。因此，我们分2个步骤，1，+ -图片上设置展开事件，js实现；2文件夹图片上设置链接<a href>展开事件最容易的写法如下，你认为树是一个如下结构+ 根元素
    空空+ 节点01
    空空空空+ 节点011
    空空空空+ 节点012
    空空空空+ 节点013
    空空+ 节点02
    空空空空+ 节点021
    空空空空+ 节点022
    空空+ 节点03
    空空空空+ 节点031
    空空空空空空+ 节点0311以上所有"空"字全用空白图片或空白字符占位，"+" 用+ - 图片占位，节点都用文件夹图片，链接放在文件夹图片上。所有+ - 和同一行的节点名字都取一个共同部分，每次点击+-时，寻找相关的节点及子节点，设置style的display为none或block，就实现了展开关闭。链接大家都知道不讲了。以上
      

  3.   

    都可以。如果你是用struts2 的话直接有标签可以用
      

  4.   

    建议还是用树吧
    这种下拉的2级不太直观
    dtree...