This is my development application to use a JS drop-down menu effect, now sent out to hope for more friends to help.
<! 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>
<title> Untitled Page </title>
</head>
<body>
<table width= "258" border= "0" align= "center" cellpadding= "0" cellspacing= "0" bgcolor= "#FFFFFF" >
<tr>
<TD width= "258" height= "432" valign= "Top" background= "Images/left.jpg" >
<table width= "258" border= "0" cellpadding= "0" cellspacing= "0" >
<tr>
<TD height= "valign=" "Top" background= "Images/ss.jpg" >
<table width= "90%" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr>
<TD width= "13%" height= ">"
&nbsp;</td>
<TD width= "87%" valign= "Bottom" >
<strong> Product Category </strong></td>
</tr>
</table>
</td>
</tr>
</table>
<table width= "82%" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<%--/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/ -/**/-/**/--%>
<tr style= "Cursor:hand onclick=" document.all.c1.style.display= (document.all.c1.style.display== ' none ')? ': ' None ' ">
<TD width= "10%" align= "center" valign= "Middle" class= "Border2" >
<img src= "Images/biao.jpg" width= "3" height= "5"/></td>
<TD width= "90%" height= "align=" "left" valign= "Middle" class= "Border2" >
<strong> Food Processing </strong></td>
</tr>
<TR id= "C1" style= "Display:none; line-height:24px; " >
<TD width= "10%" align= "center" valign= "Middle" class= "Border2" >
</td>
<TD width= "90%" height= "" align= "left" valign= "Middle" >
<table width= "100%" cellpadding= "0" cellspacing= "0" border= "0" style= "margin-top:2px"; >
<tr>
<td>
Food processing 1
</td>
</tr>
<tr>
<td>
Food Processing 2
</td>
</tr>
<tr>
<td>
Food Processing 3
</td>
</tr>
</table>
</td>
</tr>
<%--/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/ -/**/-/**/--%>
<tr style= "Cursor:hand onclick=" document.all.c2.style.display= (document.all.c2.style.display== ' none ')? ': ' None ' ">
<TD align= "center" valign= "Middle" class= "Border2" >
<img src= "Images/biao.jpg" width= "3" height= "5"/></td>
<TD height= "align=" "left" valign= "Middle" class= "Border2" >
<strong> Food Processing category </strong></td>
</tr>
<TR id= "C2" style= "Display:none; line-height:24px; " >
<TD width= "10%" align= "center" valign= "Middle" class= "Border2" >
</td>
<TD width= "90%" height= "" align= "left" valign= "Middle" >
<table width= "100%" cellpadding= "0" cellspacing= "0" border= "0" style= "margin-top:2px"; >
<tr>
<td>
Food Processing Class 1
</td>
</tr>
<tr>
<td>
Food Processing Class 2
</td>
</tr>
<tr>
<td>
Food Processing Class 3
</td>
</tr>
</table>
</td>
</tr>
<%--/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/-/**/ -/**/-/**/--%>
<tr style= "Cursor:hand onclick=" document.all.c3.style.display= (document.all.c3.style.display== ' none ')? ': ' None ' ">
<TD align= "center" valign= "Middle" class= "Border2" >
<img src= "Images/biao.jpg" width= "3" height= "5"/></td>
<TD height= "align=" "left" valign= "Middle" class= "Border2" >
<strong> Nut Processing </strong></td>
</tr>
<tr Id= "C3" Style= "Display:none; line-height:24px; " >
<TD width= "10%" align= "center" valign= "Middle" class= "Border2" >
</td>
<TD width= "90%" height= "" align= "left" valign= "Middle" >
<table width= "100%" cellpadding= "0" cellspacing= "0" border= "0" style= "margin-top:2px"; >
<tr>
<td>
Nut Processing Class 1 </a>
</td>
</tr>
<tr>
<td>
Nut Processing Class 2 </a>
</td>
</tr>
<tr>
<td>
Nut Processing Class 3 </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>