Есть header с меню nav, при наведении на пункты выпадает блок с подпунктами, выпадает с помощью hover.
Нужно этот выпадающий блок растянуть на всю ширину, если ставить width 100%, то этот блок уходит за границу страницы. Только с помощью отрицательного значения left можно позиционировать, но может есть варианты реализовать это иначе? Стремлюсь к такому результату:
<header class="header">
<div class="logo">
</div>
<nav class="menu">
<ul class="menu__list">
<li>
<a href="" class="menu__link">Пункт 1</a>
<ul class="sub-menu__list">
<div class="list__links">
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
</div>
</ul>
</li>
<li>
<a href="" class="menu__link">Пункт 2</a>
<ul class="sub-menu__list">
<div class="list__links">
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
</div>
</ul>
</li>
<li>
<a href="" class="menu__link">Пункт 3</a>
<ul class="sub-menu__list">
<div class="list__links">
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
</div>
</ul>
</li>
<li>
<a href="" class="menu__link">Пункт 4</a>
<ul class="sub-menu__list">
<div class="list__links">
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
</div>
</ul>
</li>
<li>
<a href="" class="menu__link">Пункт 5</a>
<ul class="sub-menu__list">
<div class="list__links">
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
<li>
<a href="" class="sub-menu__link">Подпункт меню</a>
</li>
</div>
</ul>
</li>
</ul>
</nav>
<!-- HAMBURGER MENU BEGIN -->
<div class="burger-menu">
<a href="#" class="burger-menu__button">
<span class="burger-menu__lines"></span>
</a>
<nav class="burger-menu__nav"> <!--menu-->
<ul>
<input type="radio" name="menu" id="one" checked>
<li>
<label for="one" class="title"><i class="fa fa-folder"></i>Пункт 1</label>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
</li>
<input type="radio" name="menu" id="two">
<li>
<label for="two" class="title"><i class="fa fa-edit"></i>Пункт 2</label>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
</li>
<input type="radio" name="menu" id="three">
<li>
<label for="three" class="title"><i class="fa fa-gavel"></i>Пункт 3</label>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
</li>
<input type="radio" name="menu" id="four">
<li>
<label for="four" class="title"><i class="fa fa-gears"></i>Пункт 4</label>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
</li>
<input type="radio" name="menu" id="five">
<li>
<label for="five" class="title"><i class="fa fa-gears"></i>Пункт 5</label>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
<a href="#">Подпункт меню</a>
</li>
</ul>
</nav>
<!-- <a href="" class="burger-menu__link">asdasd</a>
<a href="" class="burger-menu__link">asdasd</a>
<a href="" class="burger-menu__link">asda</a>
<a href="" class="burger-menu__link">a</a>
<a href="" class="burger-menu__link">aa</a> -->
</nav>
<div class="burger-menu__overlay">
</div>
</div>
<!-- HAMBURGER MENU END -->
</header>
CSS CODE
.header {
padding: 0 100px 0 100px;
font-weight: 500;
width: 100%;
min-height: 198px;
max-height: 288px;
color: white;
display: flex;
flex-direction: row;
align-items: center;
background-color: #0B0A0D;
font-size: 16px;
font-family: 'M PLUS 1p', sans-serif;
}
.list__links {
display: flex;
width: 362px;
height: 159px;
flex-wrap: wrap;
flex-direction: column;
}
.logo {
background: url(./img/logo.png);
width: 42px;
height: 50px;
margin-right: 213px;
}
.menu a {
text-decoration: none;
}
.menu li {
list-style: none;
position: relative;
margin-bottom: 30px;
margin-right: 142px;
}
.menu__list {
display: flex;
}
.menu__list>li {
margin: 0 5px;
}
.menu__list>li:hover {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
}
.menu__link {
font-size: 1.6vw;
color: #fff;
}
.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
padding-top: 23px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #0B0A0D;
z-index: 999;
margin-top: 3px;
}
.sub-menu__list {
height: 288px;
display: none;
position: absolute;
left: 0;
top: 16px;
padding: 20px 0px 0px 0px;
box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
width: calc(100vw - 550px);
justify-content: space-between;
}
.sub-menu__link {
color: white;
transition: .4s;
&:hover {
color:#75FF72;
transition: .4s;
;
}
}
// adaptive
@media screen and (max-width: 980px) {
.menu {
display: none;
}
}