Drop Down menus work in IE 7 and Firefox but don't work in IE 6

[arbo80]

Hi,

I'm using Javascript and CSS to create some drop down menus for a site. Everything works fine in IE7+ but it doesn't work in IE6. Some of the site's users still use IE6. Any suggestion on how to fix that issue? Below is my HTML, css and JavaScript code:

HTML
----

<ul id="menu">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<a href="#">item 4</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">News</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<a href="#">item 4</a>
</div>
</li>
</ul>
<div style="clear:both"></div>

CSS
---
#menu
{ margin: 0;
padding: 0;
z-index: 30}

#menu li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#menu li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#menu li a:hover
{ background: #49A3FF}

#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#menu div a:hover
{ background: #49A3FF;
color: #FFF}

Javascript
----------

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;


function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}

function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}


document.onclick = mclose;

Thanks