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

Question

jsfiddle：http: //jsfiddle.net/B3ARu/

我正在构建一个下拉导航。我当前的解决方案允许我使用（一些 CSS-hacks）来管理一个 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;

}

1. 如何确保我可以拥有任何我想要的嵌套项目？
2. 为什么 display: none 突然停止工作，你在我的嵌套中更深了？

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;
}

我希望它可以帮助。