Javascript 为什么'；这个下拉菜单在IE中不起作用吗？

我有一个下拉菜单，我找到了一个

在Firefox和Opera中，下拉菜单工作正常。但在InternetExplorer中它不起作用。子菜单未对齐。它们不是放在父项下，而是放在右边一点

为什么它在IE中不起作用？JavaScript代码中是否存在错误，导致其在IE中正常工作

我的用户说它在IE7.0.6002.18005和IE8.0.6中不起作用

怪癖模式仅在doctype丢失时使用。我的文档中有doctype（位置2没有空格）：

<！DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Strict//EN”“>

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>

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

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

JavaScript:

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

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

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

sfHover=function（）{
var sfEls=document.getElementById（“nav”）.getElementsByTagName（“LI”）；
对于（var i=0；iIE7在
auto
页边距方面存在问题。只需将悬停页边距从
left:auto
更改为
left:0px
，它应该可以工作。
在ul和li项目上添加填充/页边距设置如何：

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

哪个IE版本？在IE 8中似乎工作得很好。另外，你验证过你没有处于怪癖模式吗？@Johannes Rössel:谢谢，好问题。我现在已经在问题中添加了这些细节。谢谢！你唯一改变的是在前两个选择器中添加左填充和左边距，对吗？这应该做什么？你不需要这些值是吗？我的用户说菜单现在很好用。所以你的答案一定是我想要的答案。：）谢谢！