这是我开发应用中用到一个js下拉菜单效果，现在发出来希望给更多的朋友帮助。
<!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>无标题页</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="26" valign="top" background="images/ss.jpg">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="13%" height="19">
</td>
<td width="87%" valign="bottom">
<strong>产品类别</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="30" align="left" valign="middle" class="border2">
<strong>食品加工</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="30" align="left" valign="middle">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
<tr>
<td>
食品加工1
</td>
</tr>
<tr>
<td>
食品加工2
</td>
</tr>
<tr>
<td>
食品加工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="30" align="left" valign="middle" class="border2">
<strong>食品加工类</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="30" align="left" valign="middle">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
<tr>
<td>
食品加工类1
</td>
</tr>
<tr>
<td>
食品加工类2
</td>
</tr>
<tr>
<td>
食品加工类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="30" align="left" valign="middle" class="border2">
<strong>坚果加工类</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="30" align="left" valign="middle">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 2px;">
<tr>
<td>
坚果加工类1 </a>
</td>
</tr>
<tr>
<td>
坚果加工类2 </a>
</td>
</tr>
<tr>
<td>
坚果加工类3 </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>