修復位置

Question

你好，我有這樣的

<ul> 
    <li>MenuItem1</li> 
    <li>MenuItem2</li> 
    <li>MenuItem3 
    <ul> 
     <li>SubMenuItem3.1</li> 
     <li>SubMenuItem3.2</li> 
    </ul> 
    </li> 
</ul> 

這是在頁面的中心對齊的橫向菜單，和我想要做的就是當一個兩級菜單MenuItem3被選中，其子菜單出現，其項目應出現在MenuItem3下面。我描述是這樣的：

MenuItem1 MenuItem2 MenuItem3 
          /\ 
      SubMenuItem3.1 SubMenuItem3.2 

我已經做到了水平和出現的子菜單，但的MenuItem3增加大小以適應子菜單的大小。所以，我得到的是這樣的：

MenuItem1 MenuItem2   MenuItem3 
            /\ 
         SubMenuItem3.1 SubMenuItem3.2 

有什麼辦法解決這個問題嗎？這是純粹的CSS可能嗎？

謝謝！

---

BenM請求後，這裏是我目前使用的CSS：

#menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#menu > ul > li { 
    position: relative; 
    float: left; 
} 

#menu > ul > li > ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#menu > ul > li > ul > li{ 
    position: relative; 
    float: left; 
} 

------------------------ -------------
Edit vol.2
----------------------------- --------
經過Sen Jacob的建議之後，我修改了一下這one，並且因爲我不知道每個頂級菜單項有多少個孩子，所以我使用了Javascript進行適當的中心對齊。特別是我使用了JQuery的width()和position()函數。我希望這是有道理的。

Answer 1

你需要做li包含子ul，通過不關閉您的li早做到這一點：

<li>MenuItem3</li> 
    <ul> 
     <li>SubMenuItem3.1</li> 
     <li>SubMenuItem3.2</li> 
    </ul> 

變成

<li>MenuItem3 
    <ul> 
     <li>SubMenuItem3.1</li> 
     <li>SubMenuItem3.2</li> 
    </ul> 
</li> 

Answer 2

你是不是想實現這一目標？

CSS3 Family Tree

嘗試下面的樣式，jsFiddle

#menu ul { 
    width:auto; 
    clear:both; 
    display:block; 
    list-style: none; 
    margin:0 auto; 
} 
ul li { 
    display: inline-block; 
    position: relative; 
    text-align:center; 
    padding: 2px; 
} 
li ul { 
    position: relative; 
    display:inline; 
    top:25px; 
    right:50%; 
}