在jsp中怎么实现类似qq的菜单？

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body onload=constructmenu(); bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="778" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="124"> 
      <UL id=mytree style="DISPLAY: none">
        <LI value=Mail>
          <UL HREF="contents.htm" VALUE="InBox" IMGSRC="inbox.gif"></UL>
          <UL HREF="contents.htm" VALUE="OutBox" IMGSRC="outbox.gif"></UL>
          <UL HREF="contents.htm" VALUE="Sent" IMGSRC="sentitems.gif"></UL>
          <UL HREF="contents.htm" VALUE="Deleted" IMGSRC="deleted.gif"></UL>
        <LI value=Contacts> 
          <UL HREF="contents.htm" VALUE="Contacts" IMGSRC="contacts.gif"></UL>
        <LI value=Other> 
          <UL HREF="contents.htm" VALUE="Journal" IMGSRC="journal.gif"></UL>
          <UL HREF="contents.htm" VALUE="Tasks" IMGSRC="tasks.gif"></UL>
          <UL HREF="contents.htm" VALUE="Notes" IMGSRC="notes.gif"></UL>
          <UL HREF="contents.htm" VALUE="Calendar" IMGSRC="calendar.gif"></UL>
 </LI>
 <LI value=Othdddder> 
          <UL HREF="contents.htm" VALUE="Journal" IMGSRC="journal.gif"></UL>
          <UL HREF="contents.htm" VALUE="Tasks" IMGSRC="tasks.gif"></UL>
          <UL HREF="contents.htm" VALUE="Notes" IMGSRC="notes.gif"></UL>
          <UL HREF="dfef" VALUE="Calendar" IMGSRC="calendar.gif"></UL>
 </LI>
  </UL>
<SCRIPT language=javascript>
<!--
//Size of  buttons.
var BTN_HEIGHT = 25;
var BTN_WIDTH = 100;
//Space between buttons.
var BTN_SPACE = 1;var ITM_HEIGHT = 80;
var ITM_SPACE = 2;var ButtonCount = 0;
var ItemCounts;
var FocusButton;
//reset postion of buttons and items, show clicked button's items, hide other items.
function onBtnClick(btnIndex)
{
var i;
var minHeight;
var btmBtnTop;
if ((btn < 0) || (btn >= ButtonCount)) return;
document.body.scrollTop = 0;
for(i=0; i<=btnIndex; i++)
{
var btn = document.all.item("BTN" + i);
if (btn == null) 
alert("NULL BTN");
else
btn.style.posTop = i * (BTN_HEIGHT + BTN_SPACE);
};
//minimun height used by buttons and items.
minHeight = ButtonCount * (BTN_HEIGHT + BTN_SPACE) - BTN_SPACE + ItemCounts[btnIndex] * (ITM_HEIGHT + ITM_SPACE);
//calculate bottom button's start top position.
if (minHeight > document.body.clientHeight)
{
document.body.setAttribute("SCROLL", "YES", false);
btmBtnTop = (btnIndex+1) * (BTN_HEIGHT + BTN_SPACE) - BTN_SPACE + ItemCounts[btnIndex] * (ITM_HEIGHT + ITM_SPACE);
}
else
{
document.body.setAttribute("SCROLL", "NO", false);
btmBtnTop = document.body.clientHeight - (ButtonCount - btnIndex -1) * (BTN_HEIGHT + BTN_SPACE);
}
for(i=btnIndex + 1; i<ButtonCount; i++)
{
var btn = document.all.item("BTN" + i);
if (btn == null) 
alert("NULL BTN");
else
btn.style.posTop = btmBtnTop;
btmBtnTop += (BTN_HEIGHT + BTN_SPACE);
};
var itmtop = (BTN_HEIGHT + BTN_SPACE) * (btnIndex + 1);
for(i=0; i<ButtonCount; i++)
for(j=0; j<ItemCounts[i]; j++)
{
var tbl = document.all.item("ITM" + i + "_" + j);
if (null == tbl) continue;
if (i == btnIndex)
{
tbl.style.posTop = itmtop + j * (ITM_HEIGHT + ITM_SPACE);
tbl.style.visibility = "visible";
}
else
tbl.style.visibility = "hidden";
//tbl.style.display = "none";
}
FocusButton = btnIndex;
};function onResize()
{
onBtnClick(FocusButton);
}function constructmenu()
{
var i,j;
var str;
str = "";
ItemCounts = new Array();
for(i=0; i<mytree.children.length; i++)
{
var item = mytree.children.item(i);
str += '<INPUT TYPE="BUTTON" '+
'ID="BTN' + i + '" '+
'VALUE="' + item.getAttribute("VALUE") +'" ' +
'STYLE="position:absolute; HEIGHT: ' + BTN_HEIGHT + 'px; WIDTH: ' + BTN_WIDTH + 'px;" ' +
'ONCLICK="onBtnClick(' + i +');' +
'">';
str += '\n<BR>';
ItemCounts[i] = 0;
for(j=0; j < item.children.length; j++)
{
str += '<TABLE WIDTH=' + BTN_WIDTH + ' ID="ITM' + i + '_' + j + '" STYLE="position:absolute;">';
str += '<TR><TD ALIGN=CENTER>';
str += '<A HREF=' + item.children.item(j).getAttribute("HREF") + ' TARGET="CONTENTS">';
str += '<IMG SRC="' + item.children.item(j).getAttribute("IMGSRC") + '" ALIGN=CENTER STYLE="border:none;">';
str += '</A>';
str += '</TD></TR>';
str += '<TR><TD ALIGN=CENTER>';
str += item.children.item(j).getAttribute("VALUE");
str += '</TD></TR>';
str += '</TABLE>';
ItemCounts[i] ++;

}
ButtonCount ++;
}
menu.outerHTML = str; onBtnClick(0);
//menu.innerText = str;
FocusButton = 0;
window.onresize = onResize;
}//-->
</SCRIPT><DIV id=menu></DIV>

</td>
    <td width="654">&nbsp;</td>
  </tr>
</table>
</body>
</html>