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。

另一方面，您的CSS项目和二级UL似乎需要一些工作（它们现在浮动错误 - 取决于您希望它看起来如何）。

CSS DropDown菜单项彼此重叠

1 个答案: