I am currently developing a custom dropdown menu where I want the parent element to be relatively positioned within the page. The goal is for all the child elements of the dropdown menu (the list items) to appear as if they are part of a select element and not interact with the rest of the page. My initial thought was to position the children using JavaScript, like so:
function adjustChildPositions() {
var ddl = document.getElementById("myDDL");
var items = ddl.getElementsByTagName("LI");
var bottom = 0;
for (var i = 0; i < items.length; i++) {
items[i].style.top = bottom + 5 + "px";
bottom += items[i].height;
}
}
The idea is to have the parent element set to position: relative and each child element set to position: absolute to isolate them from the other content on the page.
However, I suspect that this approach is not straightforward and there may be a way to achieve this using only CSS. Hence, I turn to the experts in search of guidance.
Here is a summary of what I have implemented so far for clarity:
... (remaining content remains unchanged for brevity)