错开或阶梯式菜单答案

【问题标题】：Stagger or Stair-Case a Menu错开或阶梯式菜单
【发布时间】：2012-06-07 17:46:34
【问题描述】：

我有一个从通常的无序列表创建的菜单，我想用 CSS 水平设置样式，这样每个菜单条目都比前一个条目略低。结果将是阶梯效应：

Home
      News
             About
                    Contact

我上面的示例显示了每个菜单条目的全行位移，但我真正想要的是楼梯框的像素级控制，因此每个菜单条目可能只是从之前的菜单项。

如何使这个技巧与 CSS 一起工作，最好不使用 CSS3？更准确地说，有没有办法指定“此表面将在位置 X,Y 相对于渲染到先前渲染的项目？”

【问题讨论】：

【解决方案1】：

最简单的方法是手动将margin-top 添加到每个li。

如果您在每个li 上都有课程：

.first-li  { margin-top: 5px; }
.second-li { margin-top: 10px; }
/* ... */

如果没有，那么：

#menu li:nth-child(1) { margin-top: 5px; }
#menu li:nth-child(2) { margin-top: 10px; }
/* ... */

旧版浏览器don't support:nth-child。 is a workaround 如果您需要支持旧版浏览器并且不想为每个 li 添加一个类。

【讨论】：

我已经更新了我的问题，因为我对 CSS 中提供的“相对放置”功能感到好奇。根据我“前世”的经验，我确信即使不创建特定的类（例如“.first-li”、“.second-li”）也可以做到这一点。
没有什么能比得上“相对于前一个（兄弟）元素”。有“相对于父元素”：css-tricks.com/…
我认为你是对的。如果我要获得我想要的效果，没有 CSS3 并且没有“one-css-class-per-menu”，那么也许我应该使用 jquery 来制作导航元素的数组，然后附加位置：相对位置对于数组中的每个条目。