如何将下拉菜单置于父选项卡下居中？

我有以下 CSS/HTML 设置http://jsfiddle.net/UDAUY/ http://jsfiddle.net/UDAUY/

如何对齐下拉菜单字段使其在父选项卡下居中，如下所示

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

而不是这个，

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

这就是现在的样子。另外，我可以设置子菜单ul容器的宽度动态调整吗？现在，我已将其设置为任意高的值，这适用于所有实际目的，但想知道这是否可能。

EDIT

我添加了赏金，希望能吸引更好的答案。我正在寻找一种仅 CSS 的方法（无 JS），并且具有相对单位，而不是绝对单位。另外，字段的数量并不重要（您不必担心极长/换行问题。但是，从 2 更改为 4 不应改变居中）。

这是一个“几乎”完成的纯 CSS 居中。

http://jsfiddle.net/gNanu/ http://jsfiddle.net/gNanu/

只要我们在包装器上有 display: 块，它就适用于动态数量的子菜单项并正确居中。一旦我们删除它并隐藏子菜单，它就会变得有点混乱。我会再看一下，看看是否还能做其他事情。

Edit:

这可能是你能用 css 做的最好的事情了。http://jsfiddle.net/gNanu/4/ http://jsfiddle.net/gNanu/4/

有时它不能完美居中，而且我还没有进行任何跨浏览器测试。