Eu estava aplicando os princípios de transição quando resolvi criar dois menus com submenus, escondi os submenus dentro de uma section. O hover faz com que a caixa da section aumente de tamanho, e apareça o submenu que está oculto. Até ai deu tudo certo, fiz dois menus principais uma ao lado do outro, só que quando passo o mouse em cima do primeiro o segundo que está ao lado se desloca para baixo. Eu queria que ele ficasse no lugar dele, fixo, sem descer. Eu pensei em usar a position: fixed. Mas é essa a melhor opção? Eu juntei o CSS e o HTML na mesma pagina para facilitar o exercício. Segue o código completo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hover</title>
<style>
.html{
margin:0px;
padding:0px;
}
.cabecario{
width:100%;
height:150px;
background:lightsalmon;
}
.menu-principal{
color:white;
font-size:1.5rem;
text-align:center;
padding:2rem;
}
.menu-principal li{
display:inline-block;
padding:1rem;
margin:0;
transition:transform 1s;
}
.botao:hover{
color:red;
font-size:2rem;
border:solid 1px black;
transform:rotate(10deg);
}
section{
width:100px;
padding:0px;
margin:0px
}
.section{
width:100px;
height:1rem;
transform:translate(100px, 20px);
border:solid 1px black;
overflow: hidden;
transition:1s;
}
.section:hover{
height:7rem;
}
.section2{
width:100px;
height:1rem;
transform:translate(256px, -21px);
border:solid 1px black;
overflow: hidden;
transition:1s;
}
.section2:hover{
height:7rem;
}
</style>
</head>
<body>
<header class="cabecario">
<ul class="menu-principal">
<li class="botao"> Home</li>
<li class="botao"> Serviços</li>
<li class="botao"> Orçamentos</li>
<li class="botao"> Notícias </li>
<li class="botao"> Fale conosco</li>
</ul>
</header>
<section>
<ul class="section">
<li class="botao-section"> Home</li>
<li class="botao-section"> Serviços</li>
<li class="botao-section"> Orçamentos</li>
<li class="botao-section"> Notícias </li>
<li class="botao-section"> Fale conosco</li>
</ul>
</section>
<section>
<ul class="section2">
<li class="botao-section"> Home</li>
<li class="botao-section"> Serviços</li>
<li class="botao-section"> Orçamentos</li>
<li class="botao-section"> Notícias </li>
<li class="botao-section"> Fale conosco</li>
</ul>
</section>
</body>
</html>
