错开或阶梯菜单

我有一个菜单，是根据通常的无序列表创建的，我想使用 CSS 对其进行水平样式设置，以便每个菜单条目都略低于前一个条目。结果将是阶梯效应：

Home
      News
             About
                    Contact

上面的示例显示了每个菜单条目的全行位移，但我真正想要的是楼梯外壳的像素级控制，以便每个菜单条目可能仅比前一个菜单条目位移一半或四分之一字符高度。

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

最简单的方法是手动添加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; }
/* ... */

较旧的浏览器不支持 :nth-child. There 是一个解决方法如果您需要支持较旧的浏览器并且不想为每个浏览器添加一个类li.