Как сделать выпадающее горизонтальное меню в контейнере, но с фоном на всю ширину?

Question

[Лев Салатов]

Доброго времени суток!

Подскажите, пожалуйста, как сделать выпадающее, многоуровневое меню, контент которого ограничен контейнером, но фон должен быть на всю ширину.

Главное, что хотелось бы сделать только через ul > li > ul и без JS.

Как сделать отдельными блоками или с JS я знаю, интересно можно ли сделать такое только на CSS.

Получается так:


А должно быть так:


Песочница

Заранее спасибо!

Comments

[imko]

запили им псевдоэлемент шириной 100vw и абсолютной позицией

[Лев Салатов]

imko, Спасибо за ответ. Но если я задам для родителя position:relative (чтобы выровнять выпадающее меню), то псевдоэлемент будет начинаться с левого края.

[imko]

Лев Розанов, ну выровняй его) left:50%; tranform: translateX(-50%)

[Лев Салатов]

imko, [рука-лицо], спасибо! Точно)) Напишешь ответ? Отмечу решением.

Answer 1

[imko]

запили им псевдоэлемент шириной 100vw и абсолютной позицией, центрируй - left:50%; tranform: translateX(-50%)