html - 交错或阶梯式菜单

Question

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

Home
      News
             About
                    Contact

我上面的例子显示了每个菜单条目的全行位移，但我真正想要的是对楼梯外壳的像素级控制，这样每个菜单条目可能只是从先前的菜单条目。

如何使这个技巧与 CSS 一起工作，最好不使用 CSS3？更准确地说，是否有一种方法可以指定“此表面将在相对于先前渲染元素的 X、Y 位置渲染？”

Answer 1

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

如果你在每个 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 :第 n 个 child 。那里is a workaround如果您需要支持较旧的浏览器并且不想为每个 li 添加一个类。