top menu does not display under chrome

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;}

Code (markup):

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>

Code (markup):

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

 

We will need a link to the page to do diagnostics. A fragment of out of context code does not help much.

Cd&

 

My question would be what the devil makes you think you need javascript to do ANY of that; but that's the case 99.99999% of the time people use onmouseover/onmouseout as of ~2001ish.

As @COBOLdinosaur said, we'd need to see a live copy of it to really diagnose, but I really suspect that ALL your scripting belongs in the trash, as you're pissing all over the place with JS to do CSS' job! Much less that what scripting you have in the markup:

<a href='product/' 0  onMouseOver=topnavMouseOver('3') onMouseOut=topnavMouseOut('3')>

Code (markup):

since there is no attribute "0", and the onevent attributes need quotes around their values... but again NOT that you really have any business using onmouseover/onmouseout when that's :hover in the CSS' job. Naturally the single quotes also mean garbage server-side coding practices as well... and the 1990's language attribute on SCRIPT...

Also, the ONLY tags that can be direct children of UL is LI, so that clearing DIV is invalid/gibberish markup. Also this is 2015 not 1998, clearing DIV? REALLY? and naturally the absolute positioning of the outer DIV (that is probably also a DIV for nothing) is a bit suspect as well.

First step would be to gut the markup down to something a wee bit more sane:

<ul class="nav">
	<li><a href="http://localhost/metinfo/" class="current">Home</a></li>
	<li><a href="about/">About Us</a></li>
	<li><a href="news/">News</a></li>
	<li><a href="product/">Product</a></li>
</ul>

Code (markup):

I'm guessing the reason you have the first one as 'navDown' is that it's the current element... and that you want current red, current hovered white, normal black, normal hovered red... which is ALL CSS' job. We axe the extra DIV for nothing, all the stupid malfing scripting for nothing... not sure why you are playing around in pixels so much other than possibly an inaccessible/broken layout methodology, but guessing wildly:

.nav { 
	overflow:hidden;
	list-style:none;
	/* you REALLY sure you need to aPo this? */
	position:absolute;
	right:90px;
	top:45px;
}

.nav li {
	display:inline; 
	/*
		It's easier to deal with floating the anchors than it is to dick
		around with floats on LI. Setting these to inline prevents IE8
		staircase bug.
	*/
}

.nav a {
	float:left;
	/*
		you PROBABLY shouldn't be dicking around with inaccessible PX metric
		idiocy on something like a menu. 
		No need to say height if setting line-height.
	*/
	padding:0 0.5em;
	line-height:2em;
	/* 
		set color for the most common element so you aren't wasting
		a class for nothing. P.S. I'm guessing WILDLY on your colorations
	*/
	color:#FFF;
}

.nav a:active, /* when clicked on OR when key nav to in older browsers */
.nav a:focus, /* when key nav to in modern browsers */
.nav a:hover {  /* when mouse is over it */
	color:#F00;
}

.nav .current {
	color:#F00;
}

.nav .current:active,
.nav .current:focus,
.nav .current:hover {
	color:#000;
}

Code (markup):

Should do the trick. Since you aren't declaring fixed widths there's NO reason to be setting text-align... since it's aPo it should be wrapping floats, but setting the overflow:hidden double-checks that so there is NO reason to be wasting a clearing DIV on it. Again as you can see, there is NO reason to be WASTING javascript on this, that's not what JS is for.

REALLY though I'd be wondering why you are wasting aPo (position absolute) on a MENU -- something that REALLY should be positioned in flow.