1

Tengo el ejercicio de un menú con un subnivel en el cual tengo el siguiente problema:

  • El ancho del submenú que depende del segundo elemento o item del menú principal no se ajusta si la cantidad de elementos del menú aumenta o disminuye

He estado tratando de ajustarlo por medio de porcentajes, pero obviamente presento los siguientes inconvenientes:

  • Si la cantidad de items aumenta entonces el elemento del submenu queda demasiado grande
  • Si el tamaño de la pantalla sube o baja demasiado, entonces el ancho del li padre deja de coincidir con el elemento del submenu.

Dejo una muestra del código que he tratado donde podrán notar incluso el uso del porcentaje que menciono.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejercicio</title>
      <style>
        nav > ul {
          display: flex;
          padding: 0;
        }
        ul > li {
          flex: auto;
          list-style: none;
          background: tomato;
          text-align: center;
        }
        li > ul {
          display: none;
        }
        nav ul > li:nth-child(n+1):hover .submenu{
          display: block;
          cursor: pointer;
          position: fixed;
          padding: 0px;
          min-width: 30%;
        }
      </style>
    </head>
    <body>
    <nav>
      <ul>
        <li>Elemento 1</li>
        <li>
          Elemento 2
          <ul class="submenu">
            <li>elementos 1</li>
          </ul>
        </li>
        <li>Elemento 3</li>
      </ul>
    </nav>
    </body>
    </html>

0

1 respuesta 1

2

Problemas

Tu código tiene un error fundamental y es que has utilizado la propiedad fixed en vez de la propiedad absolute.

La razón de ello es que el la propiedad fixed se ancla a la ventana y no a los elementos añadidos.

Solución

nav > ul {
display: flex;
padding: 0;
}
ul > li {
    flex: auto;
    /*
        Añadimos el position:relative para contener el elemento absolute
    */
    position:relative
    list-style: none;
    background: tomato;
    text-align: center;
}
li > ul {
    display: none;
}
nav ul > li:nth-child(n+1):hover .submenu{
    display: block;
    cursor: pointer;
    /*
        Cambiamos el fixed por absolute
    */
    position: absolute;
    /*
        Añadimos el width:100% esto cojera todo el ancho del padre que lo contiene
        para contener un elemento absolute se requiere que el padre tenga un position:relative
    */
    width:100%
    padding: 0px;
    min-width: 30%;
}
0

Tu Respuesta

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