Sorry for the lack of clarity in my question, I am struggling to come up with a concise description.
I am currently working on creating a drop-down menu using unordered lists, which is structured like this....
<ul id="menu">
<li>Menu Item</li>
<li>Menu Item
<ul class="sub-menu">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
</ul>
My concern is whether it is possible to achieve the desired positioning behavior (I believe images would help clarify).
Case 1
The sub-menu should be centered within its parent list item, even if it is wider than the parent.
Case 2
The sub-menu needs to be centered, but there may not be enough space on the left side of the root list, causing it to align with the edge.
Case 3
Similar to Case 2, but this time the issue is with the right edge.
I believe these scenarios can be solved by tackling two challenging CSS problems.
- How to center a sub-menu within its container, regardless of size difference.
- How to ensure the submenu stays within the boundaries of the root list element.
Due to time constraints, I will implement this functionality in Javascript. However, I am curious about achieving this solely through CSS for future projects.
You can experiment with a JSFiddle here if you have any ideas.