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 中解决这个问题，因为在我尝试的每个浏览器中都会遇到同样的问题。

仅供参考，我使用 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 似乎需要一些工作（它们现在浮动错误 - 当然取决于您希望它的外观）。