Question

我正在构建一个下拉导航。我目前的解决方案允许我（一些CSS黑客）管理4个嵌套列表。但必须有一个更好的方法来实现这一点，允许我拥有任意数量的嵌套项目。

<div id="menu">

    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li>
                    <a href="#">Item 1-1</a>
                    <ul>
                        <li><a href="#">Item 1-1-1</a></li>
                        <li><a href="#">Item 1-1-2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 1-2</a></li>
                <li><a href="#">Item 1-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>

</div>

CSS

    #menu>ul>li ul>li ul {
    height:100%;
    position:absolute;
    bottom:-100%;
}

#menu>ul>li ul>li ul>li {
    display: none !important;
}

#menu>ul>li ul>li:hover ul>li {
    display:block !important;
    float: left;
    margin-left: 20px;
}

#menu>ul>li ul>li ul>li ul>li {
    visibility: hidden;

}

如何确保我可以随意拥有任何嵌套项目？
为什么显示：没有停止工作突然你更深入我的嵌套？

Answer 1

要执行您想要的多个下拉菜单，您可以使用类来进行某种递归行为：

http://jsfiddle.net/3BkFu/

HTML：

<ul class="dropdown">
    <li class="menu-item"><a href="#">Item</a>
        <ul class="dropdown">
            <li class="menu-item"><a href="#">Sub Item</a>
                <ul class="dropdown">
                    <li class="menu-item"><a href="#">Sub sub Item</a>
                        <ul class="dropdown">
                            <li class="menu-item"><a href="#">Sub sub sub Item</a></li>
                            <li class="menu-item"><a href="#">Sub sub sub Item 2</a>
                                <ul class="dropdown">
                                    <li class="menu-item"><a href="#">Sub sub sub sub Item</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sub Item 2</a></li>
        </ul>
    </li>
</ul>

CSS：

.dropdown
{
    list-style-type : none;
    background-color : gray;
    padding:0;
}

.menu-item
{
    position : relative;
    display : inline-block;
    width : 100px;
}

.menu-item>.dropdown
{
    position:absolute;
    float:left;
    display : none;
    margin-left : 25px;
    border-style : solid;
    border-width : 1px;
    border-color:lightgray;
}
.menu-item:hover>.dropdown
{
    display : block;
    width : 150px;
}

我希望它可以提供帮助。

嵌套ul li列表时如何获得动态解决方案

1 个答案: