0

L o que necesito es que, cuando se haga hover en el menu dropdown y este se despliegue, el div contenedor del menu, en este caso es ul, reciba como minimo, la altura del submenu, expandiendo asì todo el contenedor hacia abajo. Pero es una cosa que no logro hacer. Aqui el còdigo;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    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;
    text-align: left;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

espero que me podais ayudar, un saludo

2
  • No comprendo muy bien lo que quieres conseguir. ¿Podrías detallarlo un poco mejor? Así será más sencillo el ayudarte.
    – phpMyGuel
    Commented el 31 ago. 2018 a las 9:37
  • He cambiado el contenido del post, es verdad que no esta muy claro. Lo siento
    – Dario B.
    Commented el 31 ago. 2018 a las 9:54

2 respuestas 2

2

Ahora ha quedado más claro.

El conseguir lo que necesitas es tan sencillo como cambiarle al elemento .dropdown-content de tu regla CSS, la propiedad position de absolute a relative. Quedando tu regla CSS así:

CSS

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

Esto ocurre porque al tenerlo en absolute, no estaba generando un "espacio" a ocupar con el resto de elementos, al ponerle relative si que genera ese "espacio" por lo que al desplegarse hace crecer al ul por no tener este una altura fija.

1

en el css:

1) Esto quitalo: position: absolute;

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

2) Esto añadelo: overflow-y: auto;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto; /* Añadir */
  background-color: #333;
}

Como en este ejemplo: Fiddle

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.