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;
}
- 如何确保我可以根据需要拥有任何嵌套项?
- 为什么 display: none stop works stopped works suddenly you more deep in the nesting I am?
最佳答案
要实现尽可能多的下拉菜单,您可以使用类来实现某种递归行为:
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;
}
希望对您有所帮助。
关于html - 嵌套 ul li 列表时如何获得动态解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19836712/