Как сделать выпадающее меню в контейнере?

Question

[igix]

Добрый.

Вот фото меню -
Вот так должно получиться -
Есть обычное горизонтальное меню на всю ширину с background-color: blue и в контейнере (max-width: 1140px;)
При hover на пункт меню выпадает подменю (sub menu) на ВСЮ ширину экрана с

position: absolute;
left: 0;
right: 0;
width: 100%;
background-color: green;

Как сделать выпадающе подменю (sub menu) в контейнере (max-width: 1140px;)

Спасибо!

Comments

[Максим]

в каком контейнере ?

[igix]

в контейнере (max-width: 1140px;) (выделен красным бордюром)
Чтобы при responsive, подменю было в этом контейнере.

[Максим]

igix, очевидно для родительских li надо указать relative или я что то не понял ?

[igix]

Добавил еще одно фото.

[Максим]

igix, https://jsfiddle.net/Lxnp9hkt/11/ так ?

[igix]

а в контейнер все это дело засуньте пожалуйста.

[Максим]

igix, я вас не понял - о каком контейнере речь ? второй вложенный ul в этом аспекте и есть контейнер для второго вложенного меню

[igix]

Контейнер (container, wrapper) - максимальная ширина контента. С сеткой bootstrap например работали?

[Максим]

igix, https://jsfiddle.net/1zj3no6e/2/ так ? я не работаю с бутстрап и вам не советую - пишу сам и из за этого у меня нету этих проблем

[igix]

.container{
max-width: 1140px;
margin: 0 auto;
height:auto;
background:green;
}

[Максим]

igix, вы посмотрели последний пример ?

[igix]

и растяните экран предпросмотра на всю ширину - https://prnt.sc/jzdkpd

[igix]

Я вам добавил в контейнер

max-width: 1140px;
margin: 0 auto;

[igix]

background-color меню и подменю должен быть на 100% ширины экрана, а контент в контейнере.

[Максим]

igix, я не писал для container max-width - опишите всю задачу - не ясно что вы хотите получить . Надо что бы контейнер был на 100% экрана а меню было ограничено ?

[igix]

интересует, как при абсолютном позиционировании сделать контейнер.

[Максим]

igix да это можно - я понял о чём говорите - но без js работать не будет

[igix]

Посмотрите фото в шапке темы

[igix]

Максим Ленский, и я пришел к такому выводу :(

[igix]

А можете быстро набросать код?

[Максим]

igix, ну это же банально - что он не будет находится в самом меню - но я не могу дотумкать как связать пункты меню - наверно я что то думаю не так - надо подумать - таймаут

[igix]

Вроде и задача легкая, но я такое меню верстаю впервые и оно меня в ступор поставило.

Answer 1

[Максим]

Вот так вроде бы https://jsfiddle.net/1zj3no6e/49/ но jQuery надо допилить, выпадает субменю во второй ссылке