为什么不在IE下拉菜单工作？

在Firefox和Opera中，下拉菜单正常工作。但在Internet Explorer中不起作用。子派别错位。他们不是放在他们的父母项下，而是放在右边。

为什么不在IE中工作？ JavaScript代码中的错误应该使它在IE中工作吗？

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

怪癖模式只用于如果文档类型丢失，我认为。我有我的文档中的DOCTYPE（不含第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);

来源

2009-09-22 caw

哪个IE版本？似乎在IE 8中工作正常。另外，你是否确认你不是在怪癖模式？ – Joey 2009-09-22 15:13:54

@JohannesRössel：谢谢你，很好的问题。我已经将这些细节添加到了现在的问题中。 – caw 2009-09-22 15:19:05

IE7有auto利润率的问题。只需将悬停边距从left: auto更改为left: 0px即可使用。

来源

2009-09-22 15:48:46 DigitalRoss

我的用户说现在的菜单工作正常。所以你的答案一定是我正在寻找的答案。：）谢谢！ – caw 2009-09-24 19:24:44

如何将设置在UL和李项这样的填充/保证金：

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

来源

2009-09-22 15:48:50

谢谢！你已经改变的唯一细节是向前两个选择器添加填充 - 左侧和空白 - 对吗？这应该怎么做？你不需要这些值，是吗？ – caw 2009-09-23 17:23:10

为什么不在IE下拉菜单工作？

回答

相关问题