这个子菜单定位可以仅用 CSS 实现吗？
对于这个含糊的问题，我深表歉意，我想不出一个简洁、描述性的问题。
我正在用无序列表制作一个下拉菜单，看起来有点像这样......
<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 问题。
- 如何将子菜单置于其容器的中心，尽管它比容器宽。
- 如何防止子菜单超出根列表元素的范围。
由于时间紧迫，我将在 Javascript 中实现此行为。但为了将来的参考，很高兴知道这是否可以单独使用 CSS 来完成。
如果您有任何理论，可以使用 JSFiddle 来玩。
Apologies for the vague question, I can't think of a succinct, descriptive one.
I'm making a drop down menu out of unordered lists, which look a bit 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'm wondering wether this sort of positioning behaviour would be possible (Images explain this better I think)
Case 1
Sub menu is centred to it's containing list item, but is wider than it's containing list-item.
Case 2
Sub menu should be centered, but there's not enough left-space in the root list, so it keeps flush against the root lists left edge.
Case 3
Like Case 2, but this time it's the right edge.
I think it can be broken down into two tricky CSS problems.
- How to center a sub menu to it's container, despite being wider than it's container.
- How to prevent the submenu going beyond the bounds of the root-list element.
I'll be implementing this behaviour in Javascript since I'm on a deadline. But for future reference, it would be nice to know if this could be accomplished with CSS alone.
There's a JSFiddle here to play with if you have any theories.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
http://jsfiddle.net/AxnVU/28/
你现在有一个 div 包裹了你的子菜单，所以您可以使用一些技巧来使用
text-align属性来定位子菜单。如果您不想要子菜单的灰色背景，您可以将其删除并仅在 div.submenu 内的 ul 添加背景颜色，以获得与图片相同的效果。
这个想法是：你有一个 div 占据了所有可用空间（大菜单的宽度），其中包含子菜单。内联显示的子菜单可以使用 text-align 属性进行操作，以保持在可用空间的左侧、中心或右侧。
编辑
http://jsfiddle.net/AxnVU/69/
这是另一个带有更多菜单声音的选项，因为前一个只适用于三个声音。这次我们需要指定一个子菜单宽度是菜单语音的三倍（但也可以更多），即 300% 宽，并通过给出负左边距（在本例中为 -100%，这是一个菜单语音）将其居中。子菜单内有一个列表项水平居中，其技巧与以前相同。
http://jsfiddle.net/AxnVU/28/
You now have a div wrapping your submenus, so you can use some tricks to position the submenus using the
text-alignproperty.If you don't want the gray background of the submenu, you can remove that and add a background color only to the ul inside the div.submenu, to have the same effect of your pics.
The idea is: you have a div occupying all the avaiable space (the width of your big menu), which contains the submenu. The submenu, displayed inline, can be manipulated with the text-align property to stay at the left, center or right of the avaiable space.
Edit
http://jsfiddle.net/AxnVU/69/
Here is another option with more menu voices, since the previous only worked for three voices. This time we need to specify a submenu wide three times a menu voice (but could be more also), so 300% wide, and center it by giving negative left margin (-100% in this case, whih is one menu voice). Inside the submenu there is the list item horizontal center with the same trick as before.