IE9中无法显示二级菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS实现的二级下(www.webdm.cn)</title>
<style type="text/css">
body, html { padding:0; margin:0; text-align:center; font:normal 18px 'arial'; background:#CCC;}#mainNavBar { width:100%; background:#000; padding:10px 0; }#nav { width:760px; height:30px; margin:0 auto; }#nav ul { padding:0; margin:0; }#nav ul li { position:relative; float:left; width:110px; height:30px; line-height:30px; overflow:hidden;  list-style-type:none; }
#nav{  background-color:#667; }
#nav ul li a { display:block; color:#fff; text-decoration:none;outline:none;   }#nav ul li a:hover { font-weight:bold;  background-color:#666; }#subNav { position:absolute; width:100px; top:30px; left:0px; padding:5px; background-color:#667;  color:#fff; text-align:left; }   /*仅IE9支持；*/#subNav a { text-decoration:none; font-weight:normal; display:block; }#subNav a:hover { color:#f00; background:#fff; }
</style>
</head>
<body>
<div id="mainNavBar">
      <div id="nav">
            <ul>
                  <li><a href="#">首页</a></li>
                  <li> <a href="#">about us</a>
                        <div id="subNav"> <a href="#">我们的团队</a> <a href="#">项目展示</a> </div>
                  </li>
                  <li> <a href="#">我们的设计</a>
                        <div id="subNav"> <a href="#">平面设计</a> <a href="#">3D效果</a> 
                        </div>
                  </li>
                  <li> <a href="http://www.3dmax.com">成功案例</a>
                        <div id="subNav"> <a href="http://www.baidu.com"> 时尚大气</a> <a href="http://www.qq.com"> 高贵</a> <a href="http://www.fuck.com"> 热情</a> </div>
                  </li>
                  <li> <a href="#">联系我们</a>
                        <div id="subNav"> <a href="#">我们的地址</a> <a href="#">我们的未来</a> <a href="#">加入我们</a> </div>
                  </li>
            </ul>
      </div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
 
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
    this.style.fontWeight="bold";
    this.style.display="block";
    this.style.overflow="visible";
    this.style.background="#666666";
      this.style.border="none";
    }
nav[i].onmouseout=function(){
    this.style.fontWeight="normal";
    this.style.background="#000"
    this.style.overflow="hidden";
  
    }
}
</script>
</body>
</html>