Как растянуть submenu на всю ширину окна если есть контейнер?

Question

Нужно растянуть подменю на всю ширину окна, которое появляется при наведении на один из элементов меню. Само меню обернуто в контейнер. Первое что приходит в голову это добавить псевдоэлемент для submenu и растягивать его на овер 10000px, но что-то мне подсказывает что такой подход не очень))

Answer 1

Так?

.wrapper {
  width: 300px;
  background-color: #ccc;
  margin: 0px auto;
  height: 300px;
}

.menu {
  background-color: #FB7E35;
}

.menuitem {
  display: inline-block;
  color: #800;
  padding: 10px;
}

.menuitem.active {
  background-color: wheat;
}

.submenu_wrapper {
  background-color: wheat;
  position: absolute;
  left: 0;
  right: 0;
}

.submenu {
  width: 300px;
  margin: 0px auto;
  height: 200px;
  box-shadow: 0 0 10px red inset;
}

<div class="wrapper">
  Container
  <div class="menu">
    <div class="menuitem">
      Menu 1
    </div>
    <div class="menuitem">
      Menu 2
    </div>
    <div class="menuitem active">
      Menu 3
      <div class="submenu_wrapper">
        <div class="submenu">
          Submenu here
        </div>
      </div>
    </div>
    <div class="menuitem">
      Menu 4
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как растянуть submenu на всю ширину окна если есть контейнер?

Ответы (1 шт):