I am slowly getting to grips with CSS and have created my first dropdown menu.

It works great in FF, but the submenu will not show in IE. I understand there is a problem with IE using hover in CSS and I thought I had got round it with a bit of java, but no such luck.

CSS and java code posted below, I would be gratefull if someone can take a look at where I am going wrong.

Thanks in advance.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}
#nav li ul {
position:relative;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


a:link {color:#333333; text-decoration:none;}
a:visited {color:#333333;text-decoration:none;}
a:hover {color:#FF6600;text-decoration:none;}
a:active {color: FF6600;text-decoration:none;}


p.pos_abs1
{
position:absolute;
left:466px;
top:231px;
width: 463px;
height: 49px;
visibility: visible;
overflow: auto;
}
p.pos_abs
{
position:absolute;
left:464px;
top:305px;
width: 463px;
height: 139px;

visibility: visible;
}

p.pos_abs2
{
position:absolute;
left:465px;
top:422px;
width: 463px;
height: 49px;
a.link {text-decoration:none}
visibility: visible;
overflow: auto;
}

.style4 {color: #FFFFFF}
.style7 {color: #CC6600; font-family: Arial; font-size: 16px;}
.style8 {font-size: 18px}
.style9 {
font-family: "Trebuchet MS";
font-size: 16px;
}


</style>
<script type="text/javascript">//<![CDATA[//>

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//<!]]></script>

Suckerfish is highly recommended. I've also had great results with these, neither of which requires Javascript:

Position is Everything
http://www.positioniseverything.net/css-flyout.html

Duoh
http://www.duoh.com/csstutorials/2levelmenu/index.html


These other two do require Javascript in order to display in IE:

A List Apart
http://www.alistapart.com/articles/horizdropdowns/
http://www.alistapart.com/articles/hybrid/