I have a menu that is manageable. The client placed many items in li with this the menu threw some items down, overlapping the banner below. Can you predict the size of the menu? Maybe in the same ul . When the li number is too large, it increases height and does not throw the items overlapping the banner.
header nav {
background: #ff0000;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
display: block;
height: 70px;
margin: 0 auto;
padding: 0;
border-bottom: 1px solid #1e1e1e;
}
header nav>.wrap {
position: relative;
height: auto;
}
header nav>.wrap>ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: auto;
position: relative;
text-align: left;
}
header nav>.wrap>ul>li {
display: inline-block;
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
header nav>.wrap>ul>li:first-child {
border: 0;
}
header nav>.wrap>ul>li>a {
font-style: italic!important;
color: #fff;
display: inline-block;
font: 800 13px/70px 'Nunito', Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
margin: 0;
padding: 0 35px;
text-align: center;
text-decoration: none;
transition: all 0.45s ease;
height: 70px;
text-transform: uppercase;
}
header nav>.wrap>ul>li>a>span {
/*background-position: center; background-repeat: no-repeat; display: block; height: 50px;*/
}
header nav>.wrap>ul>li:hover>a {
background: rgba(0, 0, 0, 0.15);
}
header nav ul li .submenu {
background: #fff;
border-bottom: 3px solid #BD1A20;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
display: none;
font-size: 0;
padding: 20px;
position: absolute;
top: 70px;
left: 0;
width: 100%;
margin-left: 0;
z-index: 2000;
}
header nav ul li:hover .submenu {
display: block;
}
header nav ul li .submenu>ul {
display: inline-block;
height: auto;
list-style: none;
margin: 0;
padding: 0;
width: 60%;
vertical-align: top;
}
header nav ul li .submenu>ul {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
header nav ul li .submenu>ul li a {
display: inline-block;
color: #211f20;
font: 500 11px/22px 'Nunito', Arial, Helvetica, sans-serif;
margin: 0;
padding: 2px 10px;
text-decoration: none;
text-transform: uppercase;
}
header nav ul li .submenu>ul li a:hover {
color: #BD1A20;
}
header nav ul li .submenu>ul li strong a {
color: rgba(0, 0, 0, 0.5);
font: 800 10px/20px 'Nunito', Arial, Helvetica, sans-serif;
padding: 0;
text-transform: uppercase;
}
header nav ul li .submenu .submenu-img {
float: right;
width: 35%;
border-left: 1px solid #eee;
padding: 0 0 0 30px;
}
header nav ul li .submenu .submenu-img img {
display: inline-block;
height: auto;
width: 100%;
}
.header-mobile {
display: none;
}<header>
<nav>
<div class="wrap cf">
<ul>
<li>
<a href="/">
<span style="background-image: url(/uploads/imagens/categorias/);"></span>
</a>
</li>
<li class="list-cat">
<a href="/ar-condicionado">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Ar Condicionado </a>
<div class="submenu">
<ul>
<li>
<a href="/ar-condicionado-comando-do-ar-condicionado">Comando Do Ar Condicionado</a>
</li>
<li>
<a href="/ar-condicionado-compressor-ar-condicionado">Compressor Ar Condicionado</a>
</li>
<li>
<a href="/ar-condicionado-condensador-ar-condicionado">Condensador Ar Condicionado</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/eletricas">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Elétricas </a>
<div class="submenu">
<ul>
<li>
<a href="/eletricas-alternador">Alternador</a>
</li>
<li>
<a href="/eletricas-bomba-de-combustivel">Bomba de combustivel</a>
</li>
<li>
<a href="/eletricas-chave-de-seta">Chave de seta</a>
</li>
<li>
<a href="/eletricas-chicote">Chicote</a>
</li>
<li>
<a href="/eletricas-motor-de-arranque">Motor de arranque</a>
</li>
<li>
<a href="/eletricas-painel-de-intrumento">Painel de intrumento</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/freios">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Freios </a>
<div class="submenu">
<ul>
<li>
<a href="/freios-cilindro-mestre">Cilindro mestre</a>
</li>
<li>
<a href="/freios-disco">Disco</a>
</li>
<li>
<a href="/freios-hidrovaco">Hidrovaco</a>
</li>
<li>
<a href="/freios-pinsa">Pinsa</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/iluminalcao">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> iluminalçao </a>
<div class="submenu">
<ul>
<li>
<a href="/ilumicao-farol">Farol</a>
</li>
<li>
<a href="/ilumicao-lanterna">Lanterna</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/lataria">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Lataria </a>
<div class="submenu">
<ul>
<li>
<a href="/lataria-capo">capo</a>
</li>
<li>
<a href="/lataria-lateral">Lateral</a>
</li>
<li>
<a href="/lataria-mine-frente">Mine frente</a>
</li>
<li>
<a href="/lataria-parachoque">Parachoque</a>
</li>
<li>
<a href="/lataria-paralama">Paralama</a>
</li>
<li>
<a href="/lataria-portas">Portas</a>
</li>
<li>
<a href="/lataria-tampa-traseira">Tampa traseira</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/motor">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Motor </a>
<div class="submenu">
<ul>
<li>
<a href="/motor-biela">Biela</a>
</li>
<li>
<a href="/motor-cabecote">Cabeçote</a>
</li>
<li>
<a href="/motor-motor-completo">Motor completo</a>
</li>
<li>
<a href="/motor-pistao">Pistao</a>
</li>
<li>
<a href="/motor-radiador">Radiador</a>
</li>
<li>
<a href="/motor-tbi">TBI</a>
</li>
<li>
<a href="/motor-virabrequin">Virabrequin</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/suspensao">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Suspensão </a>
<div class="submenu">
<ul>
<li>
<a href="/suspensao-amortecedor-torre-completa">Amortecedor torre completa</a>
</li>
<li>
<a href="/suspensao-bomba-direcao-hidraulica">Bomba direçao hidraulica</a>
</li>
<li>
<a href="/suspensao-caixa-de-direcao">Caixa de direçao</a>
</li>
<li>
<a href="/suspensao-eixo-traseiro">Eixo traseiro</a>
</li>
<li>
<a href="/suspensao-mola-traseira">Mola traseira</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/tapecaria">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Tapeçaria </a>
<div class="submenu">
<ul>
<li>
<a href="/tapecaria-fechadura-da-porta">Fechadura da porta</a>
</li>
<li>
<a href="/tapecaria-forro-de-portas">Forro de portas</a>
</li>
<li>
<a href="/tapecaria-jogo-de-bancos">Jogo de bancos</a>
</li>
<li>
<a href="/tapecaria-quebra-sol">Quebra sol</a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/transmissao">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Transmissao </a>
<div class="submenu">
<ul>
<li>
<a href="/transmissao-cambio">Cambio</a>
</li>
<li>
<a href="/transmissao-cardan">Cardan</a>
</li>
<li>
<a href="/transmissao-diferencial">Diferencial</a>
</li>
<li>
<a href="/transmissao-semi-eixo">Semi eixo </a>
</li>
</ul>
</div>
</li>
<li class="list-cat">
<a href="/vidros">
<span style="background-image: url(/uploads/imagens/categorias/);"></span> Vidros </a>
<div class="submenu">
<ul>
<li>
<a href="/vidros-maquina-de-vidro-eletrica">Maquina de vidro eletrica</a>
</li>
<li>
<a href="/vidros-maquina-de-vidro-manuel">Maquina de vidro manuel</a>
</li>
<li>
<a href="/vidros-parabrisas">Parabrisas</a>
</li>
<li>
<a href="/vidros-retrovisores">Retrovisores</a>
</li>
<li>
<a href="/vidros-vidros-da-porta">Vidros da porta</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</header>