1

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?"

Brent Arias
  • 29,277
  • 40
  • 133
  • 234

1 Answers1

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I've updated my question, since I'm curious about a "relative placement" capability I thought was available in CSS. I was certain, based on experience from my "prior life", that this could be done even without creating specific classes (e.g. '.first-li', '.second-li'). – Brent Arias Dec 06 '11 at 18:18
  • There's nothing like "relative to the previous (sibling) element". There is "relative to the parent element": http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/ – thirtydot Dec 06 '11 at 20:28
  • I think you are right. If I'm going to get the effect I want, without CSS3 and without "one-css-class-per-menu", then perhaps I should use jquery to make an array of the nav elements and then attach the position:relative location for each entry in the array. – Brent Arias Dec 07 '11 at 04:36