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

仅供引用，我使用 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 似乎需要一些工作(它们现在 float 错误 - 当然取决于您希望它看起来如何)。