修复水平二级 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 的建议，我对 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%;
}