js下拉菜单在ie6中显示正常,ie8中出现问题,应该如何修改?请大家给个意见,偶的头已经大了,原文如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<style>
#toplink2{
margin:0;
padding:0;
top:97px;
right:70px;
line-height:24px;
list-style:none;
}
#toplink2 li{
margin:0;
padding:0;
float:left;
width:100px;
position:relative;
}
#toplink2 li a{color:red;}
#toplink2 li ul{
margin:0;
padding:0;
width:160px;
position:absolute;
display:none;
left:0;
top:20px;
border:1px solid #000;
}
#toplink2 li ul li{
width:150px;
text-align:left;
background:#f0f0f0;
margin:0;
padding:0 0 0 10px;
list-style:none;
}
#toplink2 li ul li a{
color:#5486c5;
}
#toplink2 li.play ul{
display:block;
}
#text{
clear:left;
}
</style>
<script>
function nav()
{
var t=document.getElementById("toplink2").getElementsByTagName("li");
for(var i=0;i<t.length;i++)
{
t[i].onmouseover=function(){
this.className="play";
}
t[i].onmouseout=function(){
this.className="";
}
}
}
window.onload=nav;
</script>
</head>
<body>
<ul id="toplink2">
<li>
<a href="#">菜单1</a>
<ul>
<li><a href="#">菜单1.1</a></li>
<li><a href="#">菜单1.2</a></li>
<li><a href="#">菜单1.3</a></li>
<li><a href="#">菜单1.4</li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul>
<li><a href="#">菜单2.1</a></li>
<li><a href="#">菜单2.2</a></li>
<li><a href="#">菜单2.3</a></li>
<li><a href="#">菜单2.4</a></li>
</ul>
</li>
</ul>
<div id="text">
testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a
testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a
testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a testtetaeetaet tetatea eatgaw3wete faga a
</div>
</body>
</html>