Apologizing for a vague question, I cannot come up with a brief, descriptive one.
I am making a dropdown menu from unordered lists that look something 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>
However, I am wondering if this kind of positioning behavior is possible (images explain this better, I think)
Case 1
A submenu focuses on it containing a list item, but is wider than the list item.
Case 2
The submenu should be centered, but there is not enough left space in the root list, so it rests on the edge of the left edge of the root lists.
Case 3
Like case 2, but this time it is the right edge.
I think it can be broken down into two complex CSS issues.
- How to center a submenu on a container, even though it is wider than the container.
- , .
Javascript, . , CSS.
JSFiddle , , - .