爲什麼不下拉菜單工作？

我已經下載了Refresh template by Styleshout.com，因爲我非常喜歡它。但不幸的是，它沒有下拉菜單，只有普通的菜單。爲什麼不下拉菜單工作？

所以我試圖整合一個下拉菜單which I found a nice tutorial for。

它幾乎可以工作 - 差不多。結果如下：the template on my webspace。

菜單打開 - 但位置錯誤。爲什麼？我的實現有什麼問題？所有3個下拉列表都在第一個項目下打開。

我希望你能幫助我。提前致謝！

PS：下面的代碼：

#################### 
####### HTML ####### 
#################### 
<ul id="nav"> 
    <li><a href="index.html">Nav #1</a> 
     <ul> 
      <li><a href="#">Nav #1.1</a></li> 
      <li><a href="#">Nav #1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="index.html">Nav #2</a> 
     <ul> 
      <li><a href="#">Nav #2.1</a></li> 
      <li><a href="#">Nav #2.2</a></li> 
     </ul> 
    </li> 
    <li><a href="index.html">Nav #3</a> 
     <ul> 
      <li><a href="#">Nav #3.1</a></li> 
      <li><a href="#">Nav #3.2</a></li> 
     </ul> 
    </li> 
</ul> 

#################### 
#### JAVASCRIPT #### 
#################### 
sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
     } 
     sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

################### 
####### CSS ####### 
################### 
ul#nav li ul { 
    position: absolute; 
    left: -9999px; 
    top: 38px; 
    display: block; 
    width: 100px; 
    background-color: transparent; 
} 
ul#nav li { 
    position: relative; 
} 
ul#nav li ul li { 
    float: none; 
} 
/* Links in the drop down lists start */ 
ul#nav li ul li a { 
    clear: left; 
    display: block; 
    text-decoration: none; 
    width: 100px; 
    background-color: #333; 
} 
/* Links in the drop down lists end */ 
/* Making visible start */ 
ul#nav li:hover ul, #nav li.sfhover ul { 
    left: auto; 
} 
/* Making visible end */

來源

2009-08-06 caw

您需要浮在容器李的左，設置彈出框，以100％的「頂」的價值。（僅在FF3.5測試）

ul#nav li { 
    position: relative; 
    float: left; 
} 

ul#nav li ul { 
    position: absolute; 
    left: -9999px; 
    top: 100%; 
    display: block; 
    width: 100px; 
    background-color: transparent; 
}

來源

2009-08-06 23:54:07 klamping

非常感謝！至少在Firefox中它現在起作用了。 – caw 2009-08-07 09:42:14

並沒有真正直接解釋，但我會建議加和減一類屬性，不修改（的getAttribute，的removeAttribute等）。另外，你的類名有一個空格（「sfhover」），這可能不是一個好主意。

來源

2009-08-06 23:56:50

我不知道爲什麼類名中有一個空格。我在教程中找到了這個JavaScript代碼。但它在IE中正常工作。 – caw 2009-08-07 09:46:05

這裏：

<li> 
    <a>Nav #1</a> 
    <ul> 
     <li>Nav #1.1</li> 
    <ul> 
</li>

移動整個菜單和其子菜單。你將不得不浴液：在<李>留下不<一個>

#menu ul li a { 
    float: none; 
} 
#menu ul li { 
    float: left; 
}

一件事，這並不涉及您的問題。但是，我認爲你應該使用display：none/block而不是left：-9999px/auto。

希望它有幫助。

來源

2009-08-07 02:22:52 Bird

我的教程說：爲了讓下拉菜單在Opera中工作：「所以，而不是顯示：我們使用左：-999em推動下拉列表的視圖，然後離開：自動（而不是左：0）帶它回來了「 – caw 2009-08-07 09:43:51

以前從來不知道，謝謝。 – Bird 2009-08-07 13:52:03

如果您使用「display：none」，則屏幕閱讀器（http://en.wikipedia.org/wiki/Screen_reader）等網頁輔助功能設備將不會讀取內容。通過使用「left：-999em」，您可確保屏幕閱讀器仍能看到內容，即使它離開了頁面。 – klamping 2009-08-08 00:44:28

我認爲它只能在Firefox中工作的原因，或者我應該說只能在Firefox上工作，因爲這是很久以前發佈的，IE是可能需要特定的像素位置，而不是100％。我會建議嘗試至少爲IE瀏覽器0px，這至少爲我工作。

來源

2011-06-23 14:14:50 Mitch

爲什麼不下拉菜單工作？

回答

相關問題