How to create a drop-down menu in div? - css

Question

How to show the scrollable menu when passing the pointer over the div of the text 1x the scrollable menu is displayed.
What I want to do is something similar to the following image:
My code structure:
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>

Answer 1

Something like this?
Edit:
First you leave a space above 'spdText'. You position 'speed' over 'spdText' giving it a negative top value.
.spdText {
width: 3em;
height: 1.8em;
line-height: 1.8em;
position: relative;
font-size: 1em;
font-weight: 900;
text-shadow: none;
border-radius: 10%;
color: #29303b;
background-color: hsla(0,0%,100%,.9);
margin-top:5rem; /* You leave a space above */
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.spdText:hover .speed {
display: block;
list-style: none;
max-height: 300px;
transition: max-height 1s;
left:-25px;
background-color: black;
opacity: 0.5;
color: white;
top: -4.4rem;
}
<div class="spdText">1x
<ul class="speed">
<li>x3</li>
<li>x1</li>
</ul>
</div>