.header {
position: relative;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #382c1e;
}
.header .main-menu {
position: relative;
max-width: 991px;
width: 100%;
list-style: none;
font-size: 14px;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.header .main-menu a {
text-decoration: none;
}
.header .main-menu > li > a {
color: #b89063;
}
.popup-menu {
position: absolute;
top: 34px;
left: 0;
list-style: none;
background: #fff;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .5rem 0;
max-height: 100px;
align-content: flex-start;
align-items: flex-start;
}
.popup-menu > li {
padding: .4rem 1.5rem;
}
.popup-menu > li > a {
font-size: 1.1rem;
line-height: 22px;
color: #fc6a20;
}
<header>
<div class="header">
<ul class="main-menu">
<li>
<a href="#">О компании</a>
</li>
<li>
<a href="#">Продукция</a>
<ul class="popup-menu">
<li>
<a href="#">Фильтры для очистных сооружений</a>
</li>
<li>
<a href="#">Фильтры для насосных станций</a>
</li>
<li>
<a href="#">Баки и контейнеры</a>
</li>
<li>
<a href="#">Корзины и решетки</a>
</li>
<li>
<a href="#">Прочее оборудование</a>
</li>
</ul>
</li>
<li>
<a href="#">Сертификаты</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
</ul>
</div>
</header>
Есть всплывающее подменю .popup-menu, также есть блоки, которые не влезают в колонку, и флекс их размещает рядом. Как залить фоном все подпункты, а не только первую колонку?
position: absolute;
, т.е. он не находится в "обычном контексте документа". Он даже может позиционироваться не от более "верхнего" родителя. А ты хочешь чтобы он начал кого-то "растягивать".