есть header с nav, где при наведении выпадает список.
Выделил красным блок с подменю, который выходит при наведении на пункты меню. Как расстянуть по всей ширине выпадающий блок? Header по высоте расширяется при наведении на меню.
<body>
<div class="wrap">
<header class="header">
<div class="logo">
</div>
<nav>
<ul>
<li>
<a href="">Пункт 1</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Пункт 2</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Пункт 3</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Пункт 4</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Пункт 5</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
<li><a href="#">Подпункт 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ul[class],
ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
display: block;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.wrap {
background-color: black;
width: 100%;
font-family: 'M PLUS 1p', sans-serif;
}
.header {
font-weight: 500;
width: 100%;
min-height: 198px;
max-height: 288px;
color: white;
padding-right: 100px;
padding-left: 100px;
display: flex;
flex-direction: row;
align-items: center;
.logo {
background: url(./img/logo.png);
width: 42px;
height: 50px;
margin-right: 213px;
}
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0
}
a {
text-decoration: none;
color: #fff
}
nav {
float: right;
}
nav>ul {
float: left;
position: relative
}
nav li {
list-style: none;
float: left
}
nav .dropdown {
position: relative
}
nav li a {
float: left;
padding: 35px
}
nav li a:hover {
background: #2C3E50
}
nav li ul {
display: none
}
nav li:hover ul {
width: 100%;
display: inline;
background: #000000;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
nav li li {
float: none
}
nav .dropdown ul {
position: absolute;
left: 0;
top: 100%;
background: #fff;
padding: 20px 0;
border-bottom: 3px solid #34495e
}
nav .dropdown li {
white-space: nowrap
}
nav .dropdown li a {
padding: 10px 35px;
font-size: 13px;
min-width: 200px
}
nav .mega-dropdown {
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: #fff;
overflow: hidden;
padding: 20px 35px;
}
nav li li a {
float: none;
color: #333;
display: block;
padding: 8px 10px;
border-radius: 3px;
font-size: 13px
}
nav li li a:hover {
background: #bdc3c7;
background: #FAFBFB
}
.mega-col {
width: 25%;
float: left
}
#menu-icon {
position: absolute;
right: 0;
top: 50%;
margin-top: -12px;
margin-right: 30px;
display: none
}
#menu-icon span {
border: 2px solid #fff;
width: 30px;
margin-bottom: 5px;
display: block;
-webkit-transition: all .2s;
transition: all .1s
}
@media only screen and (max-width: 1170px) {
nav>ul>li>a {
padding: 35px 15px
}
}
@media only screen and (min-width: 960px) {
nav {
display: block!important
}
}
@media only screen and (max-width: 959px) {
nav {
display: none;
width: 100%;
clear: both;
float: none;
max-height: 400px;
overflow-y: scroll
}
#menu-icon {
display: inline;
top: 45px;
cursor: pointer
}
#menu-icon.active .first {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: 10px
}
#menu-icon.active .second {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
position: relative;
top: -9px;
}
#menu-icon.active .third {
display: none
}
.search {
float: none
}
.search input {
width: 100%
}
nav {
padding: 10px
}
nav ul {
float: none
}
nav li {
float: none
}
nav ul li a {
float: none;
padding: 8px;
display: block
}
#header nav ul ul {
display: block;
position: static;
background: none;
border: none;
padding: 0
}
#header nav a {
color: #fff;
padding: 8px
}
#header nav a:hover {
background: #fff;
color: #333;
border-radius: 3px
}
#header nav ul li li a:before {
content: "- "
}
.mega-col {
width: 100%
}
}