0
I have a menu that is manageable. The client has placed many items on li With this the menu threw some items down, superimposing the banner that is below. Is there any way I can predict the menu size? Maybe on ul same. There when the number of li is too big, it increases the height and does not play 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>
Even if Felipe did this you don’t think it would be a little weird the menu keep growing its height? and pushing all the content down? There would probably be an empty space left with the color of your menu and it would look half nothing.. Why not think about a scroll to the menu?
– Bsalvo
It’s weird, yes. But it’s the client’s request.
– Felipe Viero Goulart