1
The tag NAV does not occupy the specified 1200px width, getting smaller than required. And tag NAV of the next menu occupies the line not occupied by NAV superior.
Take the example:
As spoken the tag NAV orange color does not occupy the width 1200px, thus the tag NAV below rises to occupy what was not filled by NAV superior.
CSS NAV orange color:
/* Menu principal */
nav.menuprincipal{
width: 100%;
height: auto;
max-width: 1200px;
margin: auto;
}
nav.menuprincipal a{
color:#ffffff;
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
background-color: #FF8922;
}
nav.menuprincipal ul{
list-style: none;
position: relative;
}
nav.menuprincipal ul li{
width: auto;
float: left;
}
nav.menuprincipal a:hover{
background-color: #DD6900;
}
Bottom NAV tag:
.menudestaques{
width: 100%;
height: auto;
font-size: 13px;
max-width: 1200px;
margin: auto;
margin-top: 10px;
}
.menudestaques a{
color:#222;
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
}
.menudestaques ul{
list-style: none;
position: relative;
}
.menudestaques ul li{
width: auto;
float: left;
}
HTML
<nav class="menuprincipal">
<ul>
<li><a href="#" title="Notícias">NOTÍCIAS</a></li>
<li><a href="#" title="Imóveis">IMÓVEIS</a></li>
<li><a href="#" title="Colunistas">COLUNISTAS</a></li>
<li><a href="#" title="Guarapari">GUARAPARI</a></li>
<li><a href="#" title="Cidades Vizinhas">CIDADES VIZINHAS</a></li>
<li><a href="#" title="Praias">PRAIAS</a></li>
<li><a href="#" title="Empregos">EMPREGOS</a></li>
<li><a href="#" title="Cuinária">CULINÁRIA</a></li>
<li><a href="#" title="Guia Comercial">GUIA COMERCIAL</a></li>
</ul>
</nav>
<nav class="menudestaques">
<ul>
<li><a href="#" title="Praias de Guarapari">Praias</a></li>
<li><a href="#" title="Turismo Rural">Turismo Rural</a></li>
<li><a href="#" title="Horários de Ônibus">Horários de Ônibus</a></li>
<li><a href="#" title="Telefones Úteis">Telefones Úteis</a></li>
<li><a href="#" title="Onde Hospedar">Onde Hospedar</a></li>
<li><a href="#" title="Onde Comer">Onde Comer</a></li>
<li><a href="#" title="Parques Ecológicos">Parques Ecológicos</a></li>
<li><a href="#" title="Imóveis">Imóveis</a></li>
<li><a href="#" title="Taxi">Taxi</a></li>
</ul>
</nav>
The problem is in the image that is in sidebar. Can you post the code too? Running the code you posted does not generate any problem.
– Don't Panic
@Everson Generates the problem yes friend, I did the execution as you said and gives the same problem. Because the orange menu does not occupy the 1200px, you may notice that the bottom menu takes up the space left by the top menu.
– Gladison
So your monitor has less than 1200px. My monitor is bigger than that resolution and not the problem. But how commented, max-width set the maximum size it will occupy. And not the size itself. I will see a solution and let you know.
– Don't Panic
add
overflow: autoinsidenav.menuprincipalthat will work. This will make you respect the line size.– Don't Panic
@Everson Solved the bottom menu issue does not occupy the orange menu space. But the orange menu continues with 1130px and not with 1200px.
– Gladison