Box Shadows в Аккордеонном Меню

Question

У меня есть простое аккордеонное меню, работающее с использованием jQuery, но у меня возникают проблемы с его стилизацией, поэтому каждый элемент отбрасывает тень на каждый последующий элемент.Меню состоит из неупорядоченного списка, где каждый элемент является ссылкой, которая вызывает слайд-вниз / вверх при щелчке, показывая / скрывая раздел.Все, что мне нужно, это каждый заголовок, оранжевые прямоугольники, чтобы отбрасывать тень на один после него, но, похоже, никакое z-индексирование не сможет преодолеть значения по умолчанию, установленные списком (если я удалю фон списка или заставлю тени растивместо того, чтобы смотреть вниз, я вижу их).

Здесь вы можете видеть, что я перепробовал все, что мог придумать, чтобы правильно расположить вещи .Я z-indexed элементы списка и якоря в порядке убывания, но все же не повезло.Кто-нибудь знает, как заставить тени коробки работать правильно здесь?Под каждым предметом вы можете видеть последние найденные тени, которые я хочу найти.

Answer 1

На самом деле вы так близки ...

Причины:

1. порядок стека покрывает тень
2. z-index работает только с элементом с positionкроме static

Итак, решение будет таким: Для элемента, использующего z-index, добавьте position:relative.Поэтому добавьте еще одно правило, которое должно помочь:

ul#menu li, 
ul#menu li a {
    position:relative
}

Это должно быть нормально для большинства браузеров, кроме IE, у которых есть небольшие проблемы с поддержкой отрицательного z-индекса и позиции: относительно - но так как они неу вас нет хороших теней, вы можете их игнорировать.

Альтернатива : если вам не нравится использовать z-index для каждого li, вы можете предпочесть inset box-shadow,

ul#menu li a { 
    box-shadow:inset 0px 6px 13px #777;
}

Shadow слабее, а поддержка браузера гораздо более узка (последний современный браузер), но его легче кодировать.

ps для этого вопроса, добавление тега CSS очень поможет.