Как при наведении на элемент появляется блок на всю ширину контейнера, а не родителя?

Question

[Инна]

Здравствуйте! Как сделать так, чтобы при наведении на элемент списка появлялся блок со своим списком, но только не на ширину родительского элемента, а на всю ширину контейнера

https://codepen.io/irealife/pen/RwMQPeb

Comments

[Инна]

Только без абсолютного позиционирования, чтобы остальные элементы двигались ниже

[Вадим]

Определите ожидаемый результат более точно, желательно с примерами.

[Ankhena]

Сначала вам нужно сделать разметку валидной.
ul не может быть прямым потомком другого ul.
Потому что иначе не совсем понятно, кого вы обзываете родителем внутреннего списка.

[Инна]

Вадим,

При наведении на любую из моделей открываются подмодели, причем их может быть хоть 1, хоть все 10 - и чтобы верстка не ползла. Желательно, чтобы сетка была на гридах, но, если оптимальнее на флексах, то тоже хорошо ;)

Проблема у меня возникла с тем, что при наведении на модель открывается блок подмоделей, но он не на всю ширину страницы, а на ширину блока Модель. Искала решения, но нашла только при помощи calc - тогда у меня не сработала адаптивность, а также получается нужно calc прописывать каждой Модели через nth-child(an+b).

Думаю должно быть более оптимальное решение, можно не на чистом css, а с применением js или jquery (с vue/react/angular я пока не знакома)

Спасибо заранее :)