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似乎需要一些工作（它们现在浮动错误 - 取决于您希望它看起来如何）。