爲什麼不在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下拉菜單工作？

回答

相關問題