I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden.
HTML
<ul>
<li class="parent">Menu
<ul class="nested">
<li>About</li>
</ul>
</li>
</ul>
CSS Attempt 1
.parent {
display: none;
}
.nested {
display: block;
}
Unfortunately, I couldn't make the nested items visible using this approach.
CSS Attempt 2
.parent {
visibility: hidden;
}
.nested {
visibility: visible;
}
Although the parent stayed hidden, it still occupied space on the page.
I wonder if there is a third alternative or if I will have to settle for using visibility and adjusting margins for the nested list?
A related question was posed on Stack Overflow how to hide parent div, keeping inner div visible? but I want to explore all possible options beyond those suggested (such as separating the elements) and utilizing visibility.