Why doesn't this drop down menu work in IE?

Question

I have a drop down menu which I found a tutorial for.

In Firefox and Opera the drop down menu works fine. But in Internet Explorer it doesn't work. The sub menues are misaligned. They aren't placed under their parent item but a bit more to the right.

Why doesn't it work in IE? Is there a mistake in the JavaScript code which should make it work in IE?

My users say it doesn't work in IE 7.0.6002.18005 and IE 8.0.6.

The quirks mode is only used if the doctype is missing I think. And I have the doctype in my document (without the space at position 2):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML:

<ul id="nav">
<li class="menuentry"><a href="#">Main item 1</a>
 <ul>
  <li><a href="#">Sub item 1</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Sub item 3</a></li>
 </ul>
</li>
<li class="menuentry"><a href="#">Main item 2</a>
 <ul>
  <li><a href="#">Sub item 1</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Sub item 3</a></li>
 </ul>
</li>
</ul>

CSS:

ul#nav li ul {
 position: absolute;
 left: -9999px;
 top: 100%;
 display: block;
 width: 100px;
 background-color: transparent;
}
ul#nav li {
 position: relative;
 float: left;
}
/* LINKS IN DROP DOWN LISTS START */
ul#nav li ul li a, ul#nav li#current ul li a {
 clear: left;
 display: block;
 text-decoration: none;
 width: 100px;
 background-color: #333;
 color: #fff;
}
ul#nav li ul li a:hover, ul#nav li#current ul li a:hover {
 text-decoration: none;
 background-color: #ececec;
 color: #333;
}
/* LINKS IN DROP DOWN LISTS END */
/* CHANGE BETWEEN VISIBLE AND INVISIBLE START */
ul#nav li:hover ul, #nav li.sfhover ul {
 left: auto;
}
/* CHANGE BETWEEN VISIBLE AND INVISIBLE END */

JavaScript:

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  addEvent(sfEls[i], "mouseover", function() {
   this.className+=" sfhover";
  });
  addEvent(sfEls[i], "mouseout", function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  });
 }
}

function addEvent(el, name, func) {
 if (el.attachEvent)
  el.attachEvent("on" + name, func);
 else
  el.addEventListener(name, func, false);
}

addEvent(window, "load", sfHover);

Answer 1

IE7 has problems with auto margins. Just change the hover margin from left: auto to left: 0px and it should work.

Answer 2

How about adding setting the padding/margin on the ul and li items like this:

ul#nav li ul {
        position: absolute;
        left: -9999px;
        top: 100%;
        display: block;
        width: 100px;
        background-color: transparent;
        padding-left:0px;
        margin-left:0px;
}
ul#nav li {
        position: relative;
        float: left;
        list-style-type: none;
        padding-left:0px;
        margin-left:0px;
}
/* LINKS IN DROP DOWN LISTS START */
ul#nav li ul li a, ul#nav li#current ul li a {
        clear: left;
        display: block;
        text-decoration: none;
        width: 100px;
        background-color: #333;
        color: #fff;
}
ul#nav li ul li a:hover, ul#nav li#current ul li a:hover {
        text-decoration: none;
        background-color: #ececec;
        color: #333;
}
/* LINKS IN DROP DOWN LISTS END */
/* CHANGE BETWEEN VISIBLE AND INVISIBLE START */
ul#nav li:hover ul, #nav li.sfhover ul {
        left: auto;
}
/* CHANGE BETWEEN VISIBLE AND INVISIBLE END */