这个子菜单定位是否可以单独使用CSS？

Question

对于模糊问题的道歉，我想不出一个简洁，具有描述性的问题。

我正在从无序列表中制作一个下拉菜单，看起来有点像......

<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>

然而，我想知道这种定位行为是否可行（图像解释得更好我认为）

<案例1

子菜单以包含列表项为中心，但比包含列表项更宽。

<案例2

子菜单应居中，但根列表中没有足够的左空间，因此它与根列表左边缘保持齐平。

<案例3

与案例2一样，但这一次是正确的优势。

我认为它可以分解为两个棘手的CSS问题。

1. 如何将子菜单集中到它的容器中，尽管它比容器宽。
2. 如何防止子菜单超出根列表元素的范围。

我将在Javascript中实现此行为，因为我正处于截止日期。但是为了将来的参考，我们很高兴知道这是否可以仅通过CSS完成。

如果您有任何理论，可以使用JSFiddle here。

Answer 1

http://jsfiddle.net/AxnVU/28/

您现在有一个包装子菜单的div，因此您可以使用一些技巧来使用text-align属性来定位子菜单。

如果您不想要子菜单的灰色背景，可以将其删除并仅将背景颜色添加到div.submenu中的ul，以对您的照片产生相同的效果。

这个想法是：你有一个div占据所有可用空间（大菜单的宽度），其中包含子菜单。内联显示的子菜单可以使用text-align属性进行操作，以保留在可用空间的左侧，中间或右侧。

修改

http://jsfiddle.net/AxnVU/69/

这是另一种具有更多菜单声音的选项，因为之前只有三种声音。这次我们需要指定子菜单三倍的菜单语音（但也可以更多），因此300％宽，并通过给出负左边距（在这种情况下为-100％，其中一个是菜单语音）来居中。在子菜单中，列表项水平中心具有与之前相同的技巧。