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

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

------------------------------------
编辑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>