cuandoCuando quiero mostrar el submenú el fondo de la navbar también se hace más grande, ya que el submenú está dentro de ese bloque, pero quiero que la navbar se quede igual, sin cambiar su tamaño, y el submenú quede "flotando" de forma que sólo se muestre el submenú de ese botón sin afectar nada más, he probado con los position pero no me dan el resultado que busco, únicamente el fixedfixed
lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciéndohaciendo el fondo con un bloque aparte poniendoleponiéndole las propiedades y position absoluteposition: absolute
pero al cambio de resolución se desarma y no queda cómo quiero
HTML.
<nav class="navCenter">
<block>
<button class="b">Clases
<a href="offroad.html" class="hidden a1">Todo Terreno</a>
<a href="sport.html" class="hidden a2">Deportivas</a>
</button>
</block>
<block>
<button class="b">Cilindraje
<a href="" class="hidden">300-500</a>
<a href="" class="hidden">600-800</a>
<a href="" class="hidden">900-1300</a>
</button>
</block>
<block>
<button class="b">Marcas
<a href="" class="hidden">BMW</a>
<a href="" class="hidden">Yamaha</a>
<a href="" class="hidden">Kawasaki</a>
<a href="" class="hidden">KTM</a>
</button>
</block>
</nav>
CSS
.navCenter{
border: 3px solid green;
background-color: rgb(0, 131, 0);
margin-top: -1%;
margin-bottom: 30px;
text-align: center !important;
padding-bottom: 0vmin;
position: fixed;
width: 98.8%;
z-index: 2;
}
button{
font-weight: 550;
font-size: 0.4cm;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
border: 3px red;
background-color: darkgreen;
color: aliceblue;
z-index: 1;
margin: 4px;
margin-right: 10%;
position: relative;
margin-left: 10%;
width: max-content;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
button .hidden{
display: none;
}
button:hover{
background-color: rgb(78, 207, 78);
padding: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 0%;
}
button:hover .hidden{
margin-top: 8px;
display: flex;
z-index: 3;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
a{
background-color: rgb(9, 105, 9);
padding: 2px;
padding-left: 4px;
font-size: small;
font-weight: lighter;
color: rgb(250, 250, 250);
text-decoration: none;
margin-left: 20px;
text-align: center;
border-radius: 25px;
padding: 6px;
width: auto;
height: auto;
max-width: max-content;
box-sizing: content-box;
}
article{
margin-top: 5%;
position: absolute;
z-index: 1;
}
a:hover{
background-color: rgb(93, 201, 93);
}
<nav class="navCenter">
<block>
<button class="b">Clases
<a href="offroad.html" class="hidden a1">Todo Terreno</a>
<a href="sport.html" class="hidden a2">Deportivas</a>
</button>
</block>
<block>
<button class="b">Cilindraje
<a href="" class="hidden">300-500</a>
<a href="" class="hidden">600-800</a>
<a href="" class="hidden">900-1300</a>
</button>
</block>
<block>
<button class="b">Marcas
<a href="" class="hidden">BMW</a>
<a href="" class="hidden">Yamaha</a>
<a href="" class="hidden">Kawasaki</a>
<a href="" class="hidden">KTM</a>
</button>
</block>
</nav>
.navCenter{
border: 3px solid green;
background-color: rgb(0, 131, 0);
margin-top: -1%;
margin-bottom: 30px;
text-align: center !important;
padding-bottom: 0vmin;
position: fixed;
width: 98.8%;
z-index: 2;
}
button{
font-weight: 550;
font-size: 0.4cm;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
border: 3px red;
background-color: darkgreen;
color: aliceblue;
z-index: 1;
margin: 4px;
margin-right: 10%;
position: relative;
margin-left: 10%;
width: max-content;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
button .hidden{
display: none;
}
button:hover{
background-color: rgb(78, 207, 78);
padding: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 0%;
}
button:hover .hidden{
margin-top: 8px;
display: flex;
z-index: 3;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
a{
background-color: rgb(9, 105, 9);
padding: 2px;
padding-left: 4px;
font-size: small;
font-weight: lighter;
color: rgb(250, 250, 250);
text-decoration: none;
margin-left: 20px;
text-align: center;
border-radius: 25px;
padding: 6px;
width: auto;
height: auto;
max-width: max-content;
box-sizing: content-box;
}
article{
margin-top: 5%;
position: absolute;
z-index: 1;
}
a:hover{
background-color: rgb(93, 201, 93);
}