Hola muy buenas a todos.
Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se desplieguen por encima del título.
Digamos que tengo una lista de frutas. Pone frutas, y al pasar el ratón por encima, se despliegan las frutas que tengo, todo esto hecho con hover. Además, hay un alto definido en píxeles, ya que hay más de 12 frutas y quiero poder hacer scroll. Bueno pues mi duda es cómo podría hacer que se desplegasen las frutas hacia arriba, quedando el título en el mismo sitio. Lo que ocurre ahora mismo es que las frutas van para abajo y el título sube.
Estoy haciéndolo todo sin JS, solamente html y css.
Muchas gracias por vuestro tiempo, ¡Saludos!
PD: lo de frutas es un ejemplo.
.container-div {
width: 40%;
height: 700px;
display: flex;
justify-content: space-between;
border: 2px solid #fd8c8c;
}
.container-div--flex-end {
align-self: flex-end;
border: 2px solid green;
}
.c-ul {
width: 220px;
margin: 10px auto;
padding: 0;
list-style: none;
font-size: 18px;
text-align: center;
}
.c-ul__title {
list-style: none;
}
.c-ul__title:hover .c-ul--list {
max-height: 1000px;
transition: 0.3s all ease-in;
}
.c-ul__a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
.c-ul--list {
width: 220px;
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: 0.3s all ease-in;
}
.c-ul--list-overflow {
height: 200px;
overflow: auto;
}
.c-ul--list__item {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
.c-ul--list__item:hover {
background: #666;
color: #fff;
}
<div className="container-div">
<div className="container-div--flex-end">
<ul className="c-ul">
<li className="c-ul__title">
<a className="c-ul__a" href="#">
Title
</a>
<ul className="c-ul--list">
<div className="c-ul--list-overflow">
<li>
<a className="c-ul--list__item" href="URL11">
Item 1
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL12">
Item 2
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL11">
Item 3
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL12">
Item 4
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL11">
Item 5
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL11">
Item 6
</a>
</li>
<li>
<a className="c-ul--list__item" href="URL11">
Item 7
</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
</div>