Stagger or Stair-Case a Menu

Question

I have a menu, created from the usual unordered list, that I want to style horizontally with CSS so that each menu entry is slightly lower than the prior entry. The result would be a stair-case effect:

Home
      News
             About
                    Contact

My example above shows a full-line displacement for each menu entry, but what I actually want is pixel-level control of the stair-casing, so that each menu entry is potentially just a half or quarter character height displaced from the prior menu entry.

How do I make this trick work with CSS, preferably without uing CSS3? More precisely, isn't there a way to specify "this surface is to be rendered at position X,Y relative to the prior rendered item?"

Answer 1

The simplest way would be to manually add a margin-top to each li.

If you have a class on each li:

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

If not, then:

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

Older browsers don't support :nth-child. There is a workaround if you need to support older browsers and you don't want to add a class to each li.