Как правильно сверстать такое меню?

Question

[lefli]

Нужно сверствать меню двойной вложенности , как на изображении, и я не знаю, как к нему правильно подойти. Сначала пробовал подменю расположить ниже с помощью position: absolute, но тут выскочила проблема с тем, что тень родительского блока закрывается дочерним блоком, что не лечится z-index'ами. Другого варианта с позиционированием, ведущего к качественно иному результату, я не вижу. Вообще, довольно трудно даются такие элементы, т.к. пока только учусь. Буду благодарен любому совету.

Answer 1

[Александр]

Если вопрос только в том, чтобы тень не нависала над меню, то достаточно поменять z-index у какого-то из родительских блоков этого меню, т.к. именно по этой причине у вас эта ситуация "не лечится z-index'ами".

P.S. Не забудьте добавлять position: relative, чтобы z-index заработал у блоков, где никакого position не было прописано

Comments

[lefli]

Задача как раз обратная)
Тут я выложил скрин макета с тем, как надо. Есть ещё идея сделать подменю недочерними блоками, тогда проблема должна решиться. Раскрывать их придется в таком случае по айди. Решение мне кажется довольно кривым. Что бы вы сказали на такое как более опытный специалист?