Stagger或Stair-Case菜单

Question

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

Home
      News
             About
                    Contact

上面的示例显示了每个菜单条目的全行位移，但我真正想要的是对楼梯外壳进行像素级控制，因此每个菜单条目可能只是半个或四分之一字符高度偏离先前的菜单输入。

如何使用CSS，最好不使用CSS3？更准确地说，是否有一种方法可以指定“此表面将在X位置呈现，Y 相对呈现给先前呈现的项目？”

Answer 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添加一个类。