Top menu does not display properly under chrome

[abiao]

CSS:

.nav{ height:40px; overflow:hidden; position:absolute; right:90px; top:45px; }
.nav li{ list-style:none;float:left;padding:0px 10px; text-align:center; height:40px; line-height:40px;}
.nav .navdown{color:#ff0000;}
.nav .navdown a{color:#ff0000;}
.nav .navup{color:#FFFFFF; }
.nav .navup a{color:#000000;}

html:

<div class="nav"><SCRIPT language=JavaScript type=text/JavaScript>
function topnavMouseOver(param1)
  {
   var param2='10001'
   document.getElementById('nav_'+param1).className='navdown';
    document.getElementById('nav_'+param2).className='navup';
  }  
    function topnavMouseOut(param3)
  { 
   var param4='10001'
   document.getElementById('nav_'+param3).className='navup';
    document.getElementById('nav_'+param4).className='navdown';
  }
</SCRIPT>
<ul>
<li class='navdown' id='nav_10001'><a href='http://localhost/metinfo/' onMouseOver=topnavMouseOver('10001') onMouseOut=topnavMouseOut('10001') >Home</a></li>
<li class='navup' id='nav_1'><a href='about/' 0 onMouseOver=topnavMouseOver('1') onMouseOut=topnavMouseOut('1')>About Us</a></li>
<li class='navup' id='nav_2'><a href='news/'  onMouseOver=topnavMouseOver('2') onMouseOut=topnavMouseOut('2')>News</a></li>
<li class='navup' id='nav_3'><a href='product/' 0 onMouseOver=topnavMouseOver('3') onMouseOut=topnavMouseOut('3')>Product</a></li>
<div style='clear:both;'></div>
</ul>
<SCRIPT language=JavaScript type=text/JavaScript>
   document.getElementById('nav_10001').className='navup';
    document.getElementById('nav_'+10001).className='navdown';
</SCRIPT>
</div>

The above code runs ok under ie, and firefox, how to let the code runs properly under chrome, pls?

[abiao]

solved.

[not2easy]

Hi abiao, I'm happy you have solved your problem. Maybe you could share it for others who may have the same problem?