CSS DropDown菜單項重疊海誓山盟

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中，因爲我在我嘗試的每個瀏覽器中都遇到同樣的問題。

只是一個fyi，我使用umbraco作爲此網站的CMS，並且它正在生成菜單的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。

在附註中，您的項目和第二級UL的CSS似乎需要一些工作（它們現在浮動錯誤 - 取決於您希望它看起來如何）。