Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se depslieguendesplieguen por encima del título.
Código HTML :
<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>;
Código CSS :
.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>
.container-div {
width: 40%;
height: 700px;
display: flex;
justify-content: space-between;
border: 2px solid rgb(253, 140, 140);
&--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;
&__title {
list-style: none;
&:hover .c-ul--list {
max-height: 1000px;
transition: 0.3s all ease-in;
}
}
&__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;
&-overflow {
height: 200px;
overflow: auto;
}
&__item {
display: block;
padding: 10px 10px 10px 20px;
background: rgb(51, 51, 51);
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
&:hover {
background: #666;
color: #fff;
}
}
}