1

Hola estoy haciendo un menu dropdown y quiero mostrar el menu desplegabl como una caja pero cuando uso el "display: flex" solo me muestra una lista larga.

Este es el ejemplo:

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 10</a>
    <a href="#">Link 21</a>
    <a href="#">Link 32</a>
    <a href="#">Link 13</a>
    <a href="#">Link 24</a>
    <a href="#">Link 35</a>
    <a href="#">Link 16</a>
    <a href="#">Link 27</a>
    <a href="#">Link 38</a>
    <a href="#">Link 19</a>
    <a href="#">Link 20</a>
    <a href="#">Link 39</a>
    <a href="#">Link 18</a>
    <a href="#">Link 27</a>
    <a href="#">Link 36</a>
  </div>
</div>

El menú debería mostrarse como esta imagen:
Ejemplo del resultado esperado

Estaré realmente agradecido si me pudieran indicar como puedo hacer que el menú se despliegue de esa forma.

Gracias.

1 respuesta 1

1

Para que funcione solo quitale, la propiedad: postion:relative a la clase .dropdown y agregale width:100% a la clase.dropdowncontent, luego es necesario definir cuantas columnas quieres, en este caso el width de los link es de 30% para tener 3 columnas, prueba con este estilo.

<style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: inline-block;
            width: 30%;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;

        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }

    </style>
2
  • y si necesito utilizar una lista como sus ul en vez del boton??? por ejemplo <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Horarios</a></li> <li><a href="#">Regalos</a></li> <li><a href="#">Publicidad</a></li> </ul> Commented el 22 may. 2017 a las 5:16
  • lo mismo en ese caso tendrias que meter los ul dentro de tres div que tengan width de 30%, y los div deverian ser con float:left Commented el 22 may. 2017 a las 14:46

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.