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

有关于此的教程，但有两个问题：

IE6不支持：将鼠标悬停在锚点以外的标签上，因此您需要为该浏览器提供Javascript解决方案;和
让它在主要浏览器中保持一致是非常复杂的。

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

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

完成。

如果你选择（半）纯CSS路线，我强烈建议你使用现有的一个框架（如suckerfish或衍生物）。否则你只会把头发拉出来并花费大量时间让它正常工作。

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

那是因为第一级和第二级将具有特殊的样式。第一个是horitzontal或垂直酒吧。第二个会从那里弹出，但从第三个级别开始，它将以同样的方式持续弹出。

Answer 2

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

例如：

#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及更高级别。

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

Answer 3

如何将类分配给无序列表元素？

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

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

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

3 个答案: