我想在纯标记中构建一个树状导航界面(也就是说,不需要 javascript/jquery 等)。
无序列表 <ul>
似乎是最好的解决方案,我找到了这个 tutorial on simplebits.com非常接近我需要的解决方案。然而,作者在假设任何分支的最终/最大深度已知的情况下定义样式表:
#sitemap li ul li ul li {
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
我想知道是否有办法让标记“无限”下降并让样式无缝支持这一点。
如果您需要对此进行更多说明,请告诉我。
最佳答案
有这方面的教程,但是有两个问题:
- IE6 不支持:悬停在 anchor 以外的标签上,因此您需要针对该浏览器的 Javascript 解决方案;和
- 要使其在主要浏览器中一致地工作实际上非常复杂。
考虑使用 jQuery 和 superfish(受 suckefish 启发)插件的替代方案:
<ul class="menu">
<li>...
</ul>
<script type="text/javascript">
$(function() {
$("ul.menu").superfish();
});
</script>
完成。
如果您选择(半)纯 CSS 路线,我强烈建议您为此使用现有的框架之一(例如 suckerfish 或衍生框架)。否则,您只会无精打采,并花费大量时间让它正常工作。
回答您关于深度的问题:您提到的规则本质上是无限深度。请记住 CSS 中的空格是后代选择器而不是子选择器。重复组的原因是该规则仅适用于(比方说)第三层以下。
那是因为第一层和第二层会有特殊的样式。第一个将是水平或垂直条。第二个将从中弹出,但从第三个级别向下,它将始终以相同的方式弹出。
关于css - 在 CSS 中设置嵌套列表的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/636412/