html - 修复水平二级 HTML 菜单/列表的位置

Question

您好，我有一个像这样的两级菜单

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

It's a horizo​​ntal menu aligned in the center of the page, and what I want to do is when the MenuItem3 is selected its submenu appears, and its item should appear below 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;
}

-------------------------------------
编辑第 2 卷
--------- ----------------------------
Sen Jacob 建议后，我修改了这个，因为我不知道每个顶部有多少个孩子-menu 项有，我使用 Javascript 进行正确的中心对齐。特别是我使用了JQuery 的width()andposition()函数。我希望这是有道理的。

Answer 1

您需要li包含 sub 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 家谱

尝试以下样式，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%;
}