Cuando 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 fixed
lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciendo el fondo con un bloque aparte poniéndole las propiedades y position: absolute
pero al cambio de resolución se desarma y no queda cómo quiero.
.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>
nav
como contenedor de menú, lista ordenada para los elementos y lista anidada para los submenús. Supongo que podría funcionar si pones los enlaces dentro de un contenedor y aplicas posición (relativa o absoluta) para sacarlo del flujo normal, pero sigue sin convencerme que todo sea parte de un botón.