修复位置

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%; 
}