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; }
/* ... */

Старые браузеры не поддерживают :nth-child. - это обходной путь , если вам нужно поддерживать старые браузеры и вы не хотите добавлять класс к каждому li.