2

我想在纯标记中构建一个树状导航界面（即，不需要 javascript/jquery 等）。

无序列表<ul>似乎是最好的解决方案，我发现simplebits.com 上的本教程非常接近我需要的解决方案。然而，作者定义样式表时假设任何分支的最终/最大深度已知：

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

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

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

4

3 回答 3

4

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

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

考虑使用 jQuery 和 superfish（受 sinkefish 启发）插件的替代方案：

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

完毕。

如果您确实走（半）纯 CSS 路线，我强烈建议您为此使用现有框架之一（如吸盘鱼或衍生品）。否则你只会把头发拉出来并花费大量时间让它正常工作。

回答你关于深度的问题：你提到的那个规则本质上是无限深度的。请记住 CSS 中的空格是后代选择器而不是子选择器。重复组的原因是该规则仅适用于（例如）第三级以下。

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

于 2009-03-11T21:20:09.773 回答
4

您提供的标记应该适用于任何其他元素，而无需直接指定它们。

例如：

#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)

因此最后一条规则将自动应用于 4、5、6 级及更高级别。

除非您想要所有级别的特定样式，否则您应该没问题。

于 2009-03-13T11:16:21.430 回答
0

如何为无序列表元素分配一个类？

#sitemap li.tree
{
   padding-left: 16px;
}

我不明白为什么这不起作用，但如果我错了，请纠正我。

于 2009-03-11T21:21:29.740 回答