このドロップダウンメニューが機能しないのはなぜですか？

Question

私は本当に好きなので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 */ 

Answer 1

あなたは、コンテナLIの左を浮遊し、100％にポップアップボックス上の「上部」の値を設定する必要があります。ここでは、コードです。

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

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

Answer 2

（FF3.5でのみテスト済み） は本当にそれを直接説明していませんが、私は追加し、クラス属性を差し引く、（のgetAttribute、removeAttributeなど）を変更しないreccomendだろう。また、あなたのクラス名にはスペースがあります（ "sfhover"）おそらく良い考えではありません。ここで

Answer 3

：メニュー全体とそのサブメニューを移動するには

<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の代わりに-9999px/autoを使うべきだと思います。

希望します。

Answer 4

これはFirefoxでしか動作しない理由、またはこれがずっと前に投稿されて以来、Firefoxでのみ動作していたと言わざるを得ない。IEは100％ではなくtop属性の特定のピクセル位置を必要とするかもしれない。私は少なくともIEのために0pxを試すことをお勧めします、これは最近私のために最近働いた。