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

-------------------------------------
编辑第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%;
}

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

2 个答案: