Strange problem with CSS pull down menus?

[spiceydog]

I got this script off of another website, implemented it into my own, and got it looking very nice in every browser EXCEPT, as expected, IE 6...

 

What it should look like:

 

What it looks like in IE 6:

 

The relevant code:

<style type="text/css">
#sddm
{	margin: 0;
padding: 0;
position: relative; 
z-index: 1000;}

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

#sddm li a
{	display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;

color: #FFF;
text-align: center;
text-decoration: none}

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

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

#sddm 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}

#sddm div a:hover
{	background: #49A3FF;
	color: #FFF}
</style>
<script type="text/javascript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
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';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

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

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
	window.clearTimeout(closetimer);
	closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose; 
</script>
    <table>
  <tr>
  <td bgcolor="#333333">
    <!-- Begin top menu -->
    
    <ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

        <!-- End top menu -->

[spiceydog]

sorry i accidently didnt post the image of what it looks like in IE and sense its to late to edit it for some reason...

 

heres the IE 6 pic: