我有一个生成的无序列表,我想在其中制作一个下拉菜单。
问题是我不知道会有多少层,我只想一次显示一个层。
到目前为止我得到了这个:
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。而我想要的只是显示下一层,并在该层下隐藏子层。等等。但仍显示高于水平。
最佳答案
.nav ul {
}
.nav li ul {
display: none;
}
.nav ul li a {
display: block;
}
.nav li:hover>ul { //change here
display: block;
}
不是显示 hover
的所有 ul
子级,而是只显示直接子级。
关于jquery - 下拉菜单中的无限级别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20076453/