IE 6 Messing up CSS Pull Down Menus!

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:
http://img84.imageshack.us/img84/7159/workro1.jpg

What it looks like in IE 6:
http://img509.imageshack.us/img509/3999/wtftw8.jpg

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

Change


#sddm
{ margin: 0;
padding: 0;
position: relative;
z-index: 1000;}


to

#sddm
{ margin: 0;
padding: 0;
position: fixed;
z-index: 1000;}

thanks that worked great!!

but now i got another problem...

in all browsers EXCEPT IE 6 all of the pull down menus have been moved downward to exactly where the first link on the menus previously started.

sense that probably didn't make alot of sense here is a picture of the working one:
http://img509.imageshack.us/img509/7779/wtfpz3.jpg

and a picture of the broken one:
http://img509.imageshack.us/img509/9493/workfc5.jpg

Try setting position for #sddm li a. I don't have your whole code so I can't exactly tell you what to do. Maybe set two different divs.

Can I have a site link?

solved! i just used some IE mark out tags to make it use one css template if you're using IE 6 and another if you're not. it may not be the best and more reliable way but it certainly works!

thanks for all your help!

I am having the same problem, how did you fix it? Please explain.

never mind, I got it.