Home/ Questions/Q 6913913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:16:45+00:00

I have a menu, created from the usual unordered list, that I want to

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0