Help разобрать с z-index?

Question

[Сергей Миллер]

Есть 3-уровневое меню.

Пункты меню имеют свойство z-index:3 При наведении на пункт выпадает второй уровень меню, при наведении на пункт второго уровня меню выпадает третий уровень. Все уровни дочерние, 2 и 3 уровни имеют тень box-shadow

Проблема в том, что тень 3-го уровня почему-то перекрывает второй уровень меню, то есть получается почему-то 3 уровень выше 2 уровня. Не получается сделать так чтобы 2 и 3 уровни были на одном слое(имели одинаковый z-index) и тогда тени будут за уровнями как положено.

jsfieddle

Answer 1

[Senseich]

Вроде как с тенями такая фишка не прокатит, хоть они и на одно слое, элемент который ниже в потоке будет перекрывать элемент который выше. Если только попробовать поиграть с тенями, допустим для второго уровня: -webkit-box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.44);
а для третьего: -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.44);
Ну это как пример, вобщем сделать так, чтобы тени слева и справа не наезжали друг на друга.