I'm currently facing a challenge in designing a CSS menu. My goal is to have the menu open upwards instead of downwards, with the word "TEST" always staying at the top of the list even when the mouse hovers over it. I'm unsure of how to achieve this at the moment, so any suggestions or ideas would be greatly appreciated. Thank you and have a great day!
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
<a href="">abc</a>
<a href="">abc</a>
<a href="">abc</a>
<a href="">abc</a>
</div>
</div>Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB