html - 使列表项彼此相邻

Question

我有一个带有子菜单的菜单。我使用嵌套的 uls 来实现这一点。现在我面临这种情况:我希望所有元素和子元素都在各自的级别水平显示。问题是当一个父列表有一个子列表时，它的宽度会增加，所以同一级别的下一个元素会向右移动很远。

为了让事情更清楚，这是我正在做的事情的 fiddle :http://jsfiddle.net/matias/n8gFT/

如您所见，我希望将元素 B 和 C 放置在绿色虚线区域所在的位置。

这有可能吗？

我想继续对元素使用嵌套的 uls 和 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>

示例 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 有 child 。如果我点击 B，它的 child 就会显示出来，而 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/