为啥这个下拉菜单在 IE 中不起作用？

Posted 2023-02-19

【中文标题】为啥这个下拉菜单在 IE 中不起作用？

【英文标题】：Why doesn't this drop down menu work in IE?为什么这个下拉菜单在 IE 中不起作用？

【发布时间】：2010-11-30 10:45:47

【问题描述】：

我有一个下拉菜单，我为它找到了 tutorial。

在 Firefox 和 Opera 中，下拉菜单可以正常工作。但在 Internet Explorer 中它不起作用。子菜单未对齐。它们没有放置在其父项下方，而是更靠右一些。

为什么它在 IE 中不起作用？ javascript 代码中是否有错误应该使其在 IE 中工作？

我的用户说它在 IE 7.0.6002.18005 和 IE 8.0.6 中不起作用。

我认为只有在缺少 doctype 时才使用 quirks 模式。我的文档中有文档类型（位置 2 没有空格）：

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

【问题讨论】：

哪个IE版本？似乎在 IE 8 中运行良好。另外，您是否确认您没有处于 quirks 模式？

@Johannes Rössel：谢谢，好问题。我现在已将这些详细信息添加到问题中。

【参考方案1】：

IE7 在auto 边距方面存在问题。只需将悬停边距从 left: auto 更改为 left: 0px 即可。

【讨论】：

我的用户说菜单现在可以正常工作了。所以你的答案一定是我要找的那个。 :) 谢谢！

【参考方案2】：

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

【讨论】：

谢谢！您更改的唯一内容是在前两个选择器中添加 padding-left 和 margin-left ，对吗？这应该怎么做？您不需要这些值，对吗？