使列表项彼此相邻

Question

我有一个带有子菜单的菜单。我使用嵌套的ul来实现这一点。现在，我面临这种情况：我希望所有项目和子项目在其相应级别水平显示。问题在于，当父级列表具有子级列表时，其宽度会增大，因此处于同一级别的下一项会向右移动。

为了使事情更清楚，这是我正在考虑的事情：http://jsfiddle.net/matias/n8gFT/

如您所见，我希望将项目B和C放置在绿色虚线空间的位置。

可以这样做吗？

我想继续使用嵌套的ul和display: inline-block代替项目float: left

示例HTML：

<ul>
    <li>ITEM A
        <ul>
            <li>sub item A1</li>
            <li>sub item A2</li>
        </ul>
    </li>
    <li>ITEM B</li>
    <li>ITEM C</li>
</ul>

SAMPLE CSS：

ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}

编辑1：我忘了告诉你：A，B和C有孩子。如果单击B，则会显示其子级，而A和C则被隐藏...依此类推....

Answer 1

我们将从一些CSS开始

#menu > li.sub ul {
  list-style: none;
  position: absolute;
  top: -1000em;
  left: 0px;
}


#menu li.sub ul li a {
  display: inline;
}

#menu > li.sub:hover ul {
  top: 3em;
}

#menu{
  text-align:left;
}

li{
  display:inline-block;
}

添加一些HTML

<ul id="menu" >

  <li class="sub"> 
    ITEM A
    <ul>
      <li>sub A1</li>
      <li>sub A2</li>
    </ul>
  </li>

  <li class="sub">
    ITEM B
    <ul>
      <li>sub B1</li>
      <li>sub B2</li>
    </ul>
  </li>

  <li class="sub">
    ITEM C
    <ul>
      <li>sub C1</li>
      <li>sub C2</li>
    </ul>
  </li>

</ul>

和一个JSFIDDLE http://jsfiddle.net/ShADm/28/

Answer 2

您可以设置要推翻of margin-left: -20px;的列表的样式，这是一个有用的小提琴

http://jsfiddle.net/n8gFT/1/

当然，可以通过更改margin-left来编辑被推入的金额>

Answer 3

我达到了我所期望的使用display: table-cell到li的位置并减小ul的宽度。

Answer 4

将类添加到子列表并按如下方式设置它们的样式：