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

jsfiddle：

我正在构建一个下拉导航。我目前的解决方案允许我使用（一些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>

我如何确保我可以有任何嵌套的项目，因为我希望

为什么显示：没有停止工作突然你更深入的筑巢我

---

要实现尽可能多的下拉菜单，可以使用类来实现某种递归行为：

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>

我希望这能有所帮助

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

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