请帮看看用CSS和Javascript做的下拉菜单，为什么会这样？

代码：
CSS：
#navMenu ul{padding:0; margin:0; list-style:none; }
#navMenu li{ float:left; font-size:14px; text-indent:0px; position:relative; margin-right:10px;}
#navMenu li:hover ul, li:over ul{display:block;}
#navMenu li ul{ display:none; top:20px; position:absolute; }
#navMenu li ul li{float:none;}
#navMenu ul li a {display:block; font-size:12px; border:1px solid #ccc; padding:3px; text-decoration:none; color:#777; }
#navMenu li a:hover{ background-color:#f4f4f4; }

Javascript :
function startList() {
// if (document.all && document.getElementById)
{
navRoot = document.getElementById("navMenu");
for (i=0; i<navRoot.childNodes.length;i++){
node=navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover=function(){
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over","");
}
}
}
}
}

HTML:
<table><tr><td><ul id="navMenu">
<li><a href="">网络应用</a>
<ul>
<li><a href="AR.HTM">网页制做工具</a></li>
<li><a href="ar.htm">网站管理工具</a></li>
</ul>
</li>
<li>OFFICE办公及文字处理转换工具
<ul>
<li>Word批量处理工具</li>
<li>Excel批量处理工具</li>
<li></li>
</ul>
</li>
<li>多媒体、图形图像处理
<ul>
<li>批量缩略图工具</li>
<li></li>
</ul>
</li>
</ul></td>
</tr></table>

现在存在如下问题：
1、在IE8下可以出现鼠标移到"网络应用“上时，弹出二级菜单（网页制作工具、网站管理工具），但是这二个二级菜单的宽带明显很窄，出现了折行显示，不知是什么原因？
2、在Chrome浏览器下，鼠标移到"网络应用“上时，没有任何反应，二级菜单不出现。

请问要如何解决？