Как у блока absolute сделать background-color по всей ширине экрана но контент что бы остался в контенере?

Question

[Windramix]

Как выглядит сейчас можно посмотреть на сайте.
pearl.bwsite.ru

Нужно сделать так


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

А так же у меня должен при открытии этого меню должен появится бох шадов у header тоже не совсем понимаю как это сделать.

hover происходит вот так.

.subnav{
  display: none !important;
  position: fixed;
  top: 8%;
  left: 20%;
  z-index: 1000;
  display: flex;
  color: #212529;
  background-color: #fff;
  padding: 15px;
  width: 100%;
}
.header .inner nav > ul li:hover > .subnav {
  display: flex !important;
  flex-direction: column;
  gap: 15px;
}

Comments

[Ankhena]

.header .inner nav > ul li:hover > .subnav

Мамочки...

Задайте для li класс (в моем примере nav__item) и пишите .nav__item .subnav {}

И !important удалите. Лучше селекторы нормально напишите, прочитав про специфичность.
Иначе коллеги проклянут за такое.

Как у блока absolute сделать background-color по всей ширине экрана но контент что бы остался в контенере?

Так и задать. Абсолют растянуть на всю ширину окна. Внутри контейнер с контентом.

[Windramix]

Ankhena, были бы коллеги, я самоучка работаю один спросить кроме как тут нет у кого =)

По поводу растянуть по всему экрану спасибо понял, сместил класс container ниже а в subnav убрал left на 0;

[Windramix]

Ankhena, не могу выбрать вас как правильный ответ что бы закрыть тему.