请问如何学做菜单（menu)

<HTML><HEAD><TITLE>菜单实例</TITLE>
<STYLE type=text/css>TD {
FONT: 12px 宋体
}
DIV {
FONT: 12px 宋体
}
.menu_board {
BORDER-TOP: white 1px solid; WIDTH: 80px; BACKGROUND-COLOR: #cccccc
}
.menu_normal {
BACKGROUND-COLOR: #cccccc
}
.menu_over {
CURSOR: hand; BACKGROUND-COLOR: #dddddd
}
</STYLE>
</HEAD>
<BODY style="MARGIN-TOP: 16px; MARGIN-LEFT: 12px">
<TABLE height=20 cellSpacing=0 cellPadding=0 width="90%" bgColor=#cccccc>
  <TBODY>
  <TR>
    <TD width=10>&nbsp;</TD>
    <TD class=menu_normal id=menuButton1 onmouseover=menuShow(menu01,this) 
    onmouseout=menuHide(menu01,this) align=middle width=80>学校概况
</TD>
    <TD>&nbsp;</TD></TR></TBODY></TABLE>
<DIV class=menu_board id=menu01 onmouseover=menuShow(this,menuButton1) 
style="DISPLAY: none; LEFT: 22px; POSITION: absolute; TOP: 36px" 
onmouseout=menuHide(this,menuButton1)>
<TABLE cellSpacing=0 cellPadding=3 width="100%">
  <TBODY>
  <TR height=3>
    <TD></TD></TR>
  <TR align=middle>
    <TD onmouseover="this.className='menu_over'" 
    onmouseout="this.className='menu_normal'"><a href="#"    style="text-decoration:none">学校简介</a></TD></TR>
  <TR align=middle>
    <TD onmouseover="this.className='menu_over'" 
    onmouseout="this.className='menu_normal'" ><a href="#" style="text-decoration:none">校园风光</a></TD></TR>
  
  </TBODY></TABLE></DIV><SCRIPT language=javascript>
function menuShow(menu,button)
{
 
 menu.style.display='block'; 
 button.className='menu_over';  
}
function menuHide(menu,button){  menu.style.display='none';    button.className='menu_normal'}</SCRIPT>
</BODY></HTML>
</SCRIPT>
</BODY></HTML>