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

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(" sfhoverb"), "");
        });
    }
}

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

addEvent(window, "load", sfHover);

---

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

---

如何添加在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 */

链接地址: http://www.djcxy.com/p/96464.html

上一篇: 包含内容的简单HTML页面，但在Chrome 6.0.472.53中获得空白页面

下一篇: 为什么不在IE下拉菜单？