My dilemma involves a centered menu with a dropdown feature. The issue arises from the absolute positioning, causing the entire menu to shift upward when the dropdown is activated due to the increased height.
I am struggling to find an effective solution for this. Ideally, I want the menu to remain perfectly centered even when a dropdown is opened, without any movement in its position.
I am exploring CSS-only methods to address this problem. If no suitable solution is found, I may resort to using JavaScript to adjust the menu position upon loading.
var dropdown = document.getElementById("dropdown");
var show = false;
function showDropdown() {
var dropdownList = document.getElementById("dropdownList");
if (show) {
dropdownList.classList.remove("show");
show = false;
} else {
dropdownList.classList.add("show");
show = true;
}
}
dropdown.addEventListener("click", showDropdown);.parent {
height: 100vh;
width: 100vw;
background-color: #aaa;
}
.list {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.dropdown > ul {
display: none;
}
.dropdown > ul.show {
display: block;
}<div class="parent">
<ul class="list">
<li class="dropdown"><a href="#" id="dropdown">Item One</a>
<ul id="dropdownList">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>