css - 在 CSS 中设置嵌套列表的样式

Question

我想在纯标记中构建一个树状导航界面(也就是说，不需要 javascript/jquery 等)。

无序列表 <ul>似乎是最好的解决方案，我找到了这个 tutorial on simplebits.com非常接近我需要的解决方案。然而，作者在假设任何分支的最终/最大深度已知的情况下定义样式表:

#sitemap li ul li ul li {
    padding-left: 16px;
    background: url(bullet.gif) no-repeat 0 50%;
}  

我想知道是否有办法让标记“无限”下降并让样式无缝支持这一点。

如果您需要对此进行更多说明，请告诉我。

Answer 1

有这方面的教程，但是有两个问题:

1. IE6 不支持:悬停在 anchor 以外的标签上，因此您需要针对该浏览器的 Javascript 解决方案；和
2. 要使其在主要浏览器中一致地工作实际上非常复杂。

考虑使用 jQuery 和 superfish(受 suckefish 启发)插件的替代方案:

<ul class="menu">
  <li>...
</ul>
<script type="text/javascript">
$(function() {
  $("ul.menu").superfish();
});
</script>

完成。

如果您选择(半)纯 CSS 路线，我强烈建议您为此使用现有的框架之一(例如 suckerfish 或衍生框架)。否则，您只会无精打采，并花费大量时间让它正常工作。

回答您关于深度的问题:您提到的规则本质上是无限深度。请记住 CSS 中的空格是后代选择器而不是子选择器。重复组的原因是该规则仅适用于(比方说)第三层以下。

那是因为第一层和第二层会有特殊的样式。第一个将是水平或垂直条。第二个将从中弹出，但从第三个级别向下，它将始终以相同的方式弹出。