下面这段代码(也就是某些人形容的火星文字)可以用来生成一个竖直方向可展开的菜单，兼容IE,Firefox,Oprea。写这段小小的代码，我可是走了不少弯路。
1,关于javascript：
eval()函数在Firefox中居然不起作用，而且它对onclick()事件也不能很好支持。还好程序员都有共享精神，在网上我找到了一段讲述类似问题的代码，虽然不能直接解决我的问题，但毕竟知道问题出在onclick()和eval()函数上。接下来，调试了半天还是点不动菜单，我几乎要放弃了，后来，凭一点直觉，小改了一下代码，居然成功了。要点一个是event，一个是getElementById，大家可以看代码。
另外打开页面时加载的javascript函数也要特殊处理，一是调用函数的代码位置要在定义函数的代码位置之后，二是要用window.onload=function(){showsubmenu(0);}的形式调用，如果写window.onload=showsubmenu(0);是会没有反应的。
2,关于CSS：
我觉得自己不是一个完美主义者，但为了符合W3C的网页标准，我花了几乎是平时几倍的时间和精力在IE,Firefox,Oprea上调试，看看是不是有相同的显示效果。在CSS的leftnav类中，我开始定义了高度，也就是背景图片的高度。结果点开菜单的时候，在IE正常，在Firefox中展开的部分居然和下面的内容重合。后来在一个不起眼的网页上发现了这个heigh的定义是要不得的。此外我还添加了overflow:hidden;这样改动过后，在所有浏览器都OK了。
程序员也许就是这样在痛苦中长大的吧。
下面是代码，作为菜单的背景图片可以下载后放在images目录下。
图片名称：menuup.gif
http://storage.msn.com/x1p4JHjVbcjTC_Nig_zG1Xqcvwreb8OUOSpeIZstOkVIuPwIBq85F0lCqYNdRbfIStYsNjYBhj0SOEvQy2QSb8S8IDmcLY3CyNP2VLUhVkaJaDQlvR7S2c3hNajOhSncExPte82enbHrMld-k83qGf0Ag
图片名称：menudown.gif
http://storage.msn.com/x1p4JHjVbcjTC_Nig_zG1Xqcvwreb8OUOSpeIZstOkVIuMgfL8Z1P6hLyyv2s1jkQxLNUFwRVcutnL-3VzfiGow0ObavUaOsxoFVXgePurkicTiUSKjEZbILr3qBza2xRAI21cUjIlyGPqlbpy37IBYag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>菜单</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="ZhangPeng" name="author">
<script language="javascript">
function showsubmenu(sid,evt){
evt = evt ? evt : (window.event ? window.event : null);
if (document.getElementById("submenu" + sid).style.display == "none"){
document.getElementById("submenu" + sid).style.display = "block";
document.getElementById("imgmenu" + sid).style.background= 'url(images/menuup.gif)';
}else{
document.getElementById("submenu" + sid).style.display = "none";
document.getElementById("imgmenu" + sid).style.background= 'url(images/menudown.gif)';
}
}
</script>
<style type="text/css">
UL.leftnav{
margin:5px auto 0px;
font: 14px verdana,geneva,arial,helvetica,sans-serif;
width: 170px;
PADDING: 5px 0px 0px 0px ;
background: url("images/menudown.gif");
text-align: left;
LIST-STYLE-TYPE:none;
cursor: hand;
overflow:hidden;
}
A.navalpha {
MARGIN: 0px;
DISPLAY: block;
BORDER: 0px;
BACKGROUND-COLOR:#d6dff7;
PADDING: 5px 0px 3px 10px ;
COLOR: #000;
FONT-WEIGHT: normal;
TEXT-ALIGN: left;
TEXT-DECORATION:none;
WIDTH: 100%;
font: 12px verdana,geneva,arial,helvetica,sans-serif;
}
A.navalpha:visited {
BACKGROUND-COLOR: #d6dff7;
}
A.navalpha:hover {
BACKGROUND-COLOR: #E4E4E4;
color: #EC870E;
font: 12px verdana,geneva,arial,helvetica,sans-serif;
}
</style>
</head>
<body>
<div>
<span id="imgmenu0"></span>
<span id="submenu0"></span>
<UL id="imgmenu1" class="leftnav" onclick="showsubmenu(1,event)" ><span style="padding-left:8px" >修改注册信息</span>
<div id="submenu1" style="display: block;">
<li><a class="navalpha" href="#">基本信息</a></li>
<li><a class="navalpha" href="#">安全信息</a></li>
<li><a class="navalpha" href="#">附加信息</a></li>
</div>
</ul>
<ul id="imgmenu2" class="leftnav" onclick="javascript:showsubmenu(2,event)"><span style="padding-left: 8px;">帖子管理</span>
<div id="submenu2" style="display: none;">
<li><a class="navalpha" href="#">需求信息</a></li>
<li><a class="navalpha" href="#">供应信息</a></li>
</div>
</ul>
<script>window.onload=function(){showsubmenu(0);}</script>
</div>
</body></html>