对齐显示或隐藏的列表

Question

我有一个列表，其中每个项目都有一个子列表。为了设置它们，我使用了CSS。

<ul class="left">
    <li class="itemc">Item 1
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 2
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 3
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 4
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
</ul>

可以找到整个脚本here

我的问题是，当我按下主列表中的某个项目时，会显示子列表，但主列表中的其他项目会一个接一个。我应该如何或应该修改它以使其工作？我的意思是，当一个项目被点击时，要显示的子列表和下一个要与子列表末尾对齐的项目？

Answer 1

在.left li课程中添加两个附加属性：

.left  li {
    float: left;
    clear: left;
}

Updated jsfiddle

Answer 2

问题来自这样一个事实：当子项目打开时，项目位置不会改变。他们住在同一个地方。

正如您在此处所见（来自Firefox的3D视图），第3项和第4项仍然有原始位置（第2项已点击），子项目位于其上方。

实际上不认为子项目在项目中。因此，当它显示时，其他项目看不到它们上面的项目有任何变化并保持在同一个地方。但是文本受子菜单的影响。所以它被放在最后。所有这一切都归因于子项目float: left;。

要解决此问题，您只需在CSS中将clear: both;或clear: left;添加到.left li。

编辑：好像我迟到了抱歉......

小注意：你应该避免在.left li之后使用.left .submenu li，它可能会替换你之前放置的一些属性。