Css 并排设置列表层次结构的样式

我在想最好的办法来建立一个列表，这样每个ul在页面上都处于相同的物理高度。例如，如果我有：

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>3</li>
</ul>

我提出的唯一方法是将每个

绝对定位到相对定位容器的顶部，但我希望容器保持其子容器的大小。我头脑风暴已经有一段时间了，还没有想出一个好的解决办法。如果I

浮动

它们，或

显示：内联块，每个子集列表将继承其父列表的顶部，因此它将显示为：

1
2   2.1
3   2.2

话虽如此。。。救命啊
 看起来非常棘手。是否有理由不能将数据分成两个不通过子-父关系连接的列表？甚至可以使用一些javascript在客户端提取子列表

jQuery中类似于此的内容：

var childLists = $("ul > li > ul");
$(".listsContainer").append(childLists);
$("ul > li > ul").remove();

然后使用一些基本的css将新列表移动到适当的位置，最好是将它们“附加”到它们自己的子容器中，以便更容易地相互堆叠

编辑：工作示例（css不必使用javascript）
在此处发布整个代码。
稍微编辑一下你的html

<ul class="menu">
    <li><span>1</span></li>
    <li><span>2</span>
        <ul class="sub_menu">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li><span>3</span></li>
</ul>​

这里还有一个指向JSFIDLE的链接
如果你有一个“3.1”部分，会发生什么？如果一切正常，它会叠加在2.1、2.2部分的顶部。请你举个例子更新一下？但我要找的是，如果溢出被隐藏的话，允许家长不需要固定高度的东西。我要为站点地图导航创建一个大菜单，使其具有一定的动态性。我现在正在搜索CSS选项。谢谢你！请参见我的编辑以获取一个示例，列表仍然以完全相同的方式提供，javascript在客户端和位置将其剥离。不是最优雅的方式，但它确实有效！这是一个想法。仍然在寻找CSS方法！如果我使用的是JS，我也可以使用我的CSS方法，用JS设置父列表的高度。我不确定你的后一步在CSS中是否可行，至少据我所知，因为每个子列表都需要能够计算子列表的高度，然后才能正确堆叠，它们在DOM中并不直接位于彼此之上，所以我不确定这是否可行。是的，这是我的想法，但我想在宣布它不可行之前在这里签入。这不是我想要的功能。我希望这个功能（）通过一个允许父级维护空间的方法来实现。不，仍然不是这样！每个#1链接（1、1.1、3.2.1等）将位于第一行，#2将位于第二行，等等@Torr3nt这是直观的吗？那种链接放置方式？不管怎样，让我试一试：）这是我想要的那种功能。相信我：）
<ul class="menu">
    <li><span>1</span></li>
    <li><span>2</span>
        <ul class="sub_menu">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li><span>3</span></li>
</ul>​

.menu li span{
    display:block;
    float:left;
    width: 20px;
    background-color:#ddd;
    padding:2px;
}
.menu li ul{
    float:left;
}

.menu ul li{
    padding:2px;
    float:left;
    margin:0px 5px;
    background-color:#eee;
}

.menu ul{
    clear:right;
    overflow:auto;    
}

.menu > li{
    clear:both;
    background-color:#ccc;
    overflow:auto;
    width:100px;
}
​