CSSドロップダウンメニュー項目が重複しています

Question

suckerfishに基づいてドロップダウンメニューを作成しています。最上位レベルは正しく表示されますが、最初のサブメニューレベルでは、最上位レベルの下に重ねて表示されるすべてのメニュー項目が重ねて表示されます。アイテムが重なっている以外はすべて正しいです。私のHTMLとCSSは以下の通りです。

<ul id="nav"> 
    <li style="border-left: none;"> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
</ul> 


#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

#nav a { 
    display: block; 
} 

#nav li { 
    float: left; 
    padding: 0px 10px 0px 10px; 
} 

#nav li ul { 
    position: absolute; 
    width: 200px; 
    color: #FFF; 
    background-color: #000; 
    left: -999em; 
} 

#nav li:hover ul { 
    left: auto; 
} 

#nav li:hover ul, #nav li.sfhover ul { 
    left: auto; 
} 

#nav li ul ul { 
    margin: -1em 0 0 10em; 
} 

#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav li:hover ul ul, #nav li.sfhover ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { 
    left: auto; 
} 

私のCSSはsuckerfishからまっすぐに引き出されています。幅と背景色のような小さな変更がいくつかありますが、それが直接コピーであっても問題はありました。現時点では、私はFirefoxを使ってこれを取得しようとしています。私が試したすべてのブラウザで同じ問題が発生しています。

私はこのサイトのCMSとしてumbracoを使用しており、メニュー用のHTMLを生成しています。実際のリンクは、私がここに新しくなったので投稿できません。ちょうどhfer属性を含んでいます。

おかげ

Answer 1

は、私の知る限りsuckerfish技術を知っているように二重の入れ子になったリストをサポートしていません。つまり、ULは（CSSがもちろんサポートしていれば）あなたが望むほど深く入れ子にすることができますが、できないことは同じレベルのスタイル2 ULです。

改訂されたHTML（デュアルネストされたULなし）を確認してください。

<ul id="nav"> 
    <li style="border-left: none;"> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

check it onlineでもかまいません。

注意点として、アイテムと2番目のレベルのULのCSSは、何らかの作業が必要なようです（間違って表示されるようになります）。