1

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>

1
  • Normalmente se usa una etiqueta 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.
    – Triby
    Commented el 24 dic. 2022 a las 7:03

1 respuesta 1

1

Tendrías que darle un ancho fijo a .navCenter para que siempre tenga ese ancho y no se vea afectado por los elementos que están dentro:

.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%;
    height: 50px; <!-- le doy un ancho de 50px -->
    z-index: 2;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.