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

Question

[beduin01]

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

Comments

[Ankhena]

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

Вычисляйте на JS.
Задавайте для выпадашки макс ширину.
Удобно через кастомные свойства.

Answer 1

[Александр Васильев]

nav {
   width: 200px;  
     position: relative;
 }
 .dropdown {
/* убери отсюда позиционирование */
  }
.dropdown-menu {
width: 100%;
box-sizing: border-box;
/* min-width: 200px;  убери */
}

Comments

[beduin01]

Может что-то не то сделал, но теперь меню в одном месте открывается и первое и второе

[Александр Васильев]

beduin01, за пределы контейнера не выходит?