下拉菜单中的无限级别

Question

我有一个生成的无序列表，其中包含我想在其中制作下拉菜单的列表。

问题是我不知道会有多少关卡，我只想一次显示一个关卡。

到目前为止，我得到了这个：

---

HTML：

<ul class="nav">
    <li>
        <a href="#">link1</a>
    </li>
    <li>
        <a href="#">link2</a>
        <ul>
            <li>
                <a href="#">link2.1</a>
                <ul>
                    <li>
                       <a href="#">link2.1</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

.nav ul {
}
.nav li ul {
    display: none;
}
.nav ul li a {
    display: block;
}
.nav li:hover ul { 
    display: block; 
}

---

然而，当悬停在顶部时，此代码会显示所有子 ul。而我想要的只是显示下一个级别，并在该级别下隐藏子级别。等等。但仍显示上述级别。

Answer 1

jsFiddle DEMO

.nav ul {
}
.nav li ul {
    display: none;
}
.nav ul li a {
    display: block;
}
.nav li:hover>ul { //change here
    display: block; 
}

仅显示直接子代，而不是显示hover 的所有ul 子代。