如何在父標簽下設置下拉菜單？

Question

我有以下CSS / HTML設置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容器的寬度來動態調整嗎？ 現在，我把它設置為一個任意高的值，它適用於所有實際目的，但想知道這是否可行。

編輯

為了吸引更好的答案，我加入了賞金。 我正在尋找一種僅用於CSS的方法（沒有JS），以及相對單位，而不是絕對的。 此外，字段數量無關緊要（您不必擔心極長/包裝問題。但是，從2更改為4不應改變居中）。

Answer 1

這是一個純粹的css中心，幾乎完成了。

http://jsfiddle.net/gNanu/

只要我們在包裝器上顯示：block，它就適用於動態數量的子菜單項和中心。 一旦我們刪除它並隱藏子菜單，它就會有點松動。 我會再看一下，看看我能做些什么。

編輯：

這可能是你用css做的最好的。 http://jsfiddle.net/gNanu/4/

它有時並不完美，我沒有做任何跨瀏覽器測試。

Answer 2

http://pmob.co.uk/pob/centred-float.htm

（使用display：inline;和text-align：center;也可以，但有其自身的缺點）

Answer 3

我補充說：

#menu .submenu {
    position: absolute;
    display: none;
    top: 19pt;
    left: -25%;
    width:300%;
    margin: auto;
}

但不確定在所有的釀酒廠中都是堅如磐石的。 順便問這樣一個問題的好方法......

Answer 4

嘗試...

menu {text-align:center}
fieldwrapper {margin:0 auto;}
field {}

Answer 5

#menu .submenu {
position: absolute;
display: none;
top: 19pt;
width:300%;
margin: auto;
left: -100%;
text-align:center;
}

.submenu li {
background-color: #000;
margin-right: 1.5%;
padding-right: 3%;
padding-left: 3%;
margin: 0 auto;
display: inline-block;
}

這就是它對我有用的原因。 希望這是你正在尋找的答案，因為我剛加入並且沒有費心閱讀所有的答案......只是潛入其中。

Answer 6

父母需要相對位置，孩子絕對，然后孩子必須在父母內。 通過cotrolling child top: top必須包含父高度）和left:你可以控制它的位置。 如果你想要居中，你需要使用： top: [parentheight]; left: 0; top: [parentheight]; left: 0; 希望能幫助到你 ：）