是否可以使用纯 CSS 水平设置嵌套列表的每个级别的样式？

Question

我正在尝试设置嵌套列表的样式，以便每个级别（水平）显示在其 自己的 容器中，然后子列表（水平）显示在后续个容器；每一级最多存在一个子列表，因此始终可以明确指示父项。

我能看到确保某些项目（即那些在带有子列表的同级之后的项目）在其级别的正确 "row" 中（而不是在子列表之后呈现）的唯一方法是使用 position: absolute; 从正常流中删除子列表。这让我非常接近我想要的，但是我需要将子列表移动到适当的位置——但它的正确垂直位置取决于其父级容器的高度：例如，父级可能包含如此多的项目，以至于列表包裹在其容器内并扩展高度。

我知道我可以使用 JavaScript 将子列表移动到位，但是是否有一种纯粹的 CSS 方法来完成我想要的（是否涉及一些技巧，通过它绝对定位块可以相对于另一个元素定位，或者防止兄弟姐妹出现在正常流程中位于它们之前的块之后）？

下面的例子——

.container {
  width: 600px;
  margin: auto;
  position: relative;
}

ul {
  border: 1px solid lightgrey;
  width: 100%;
  text-align: center;
  padding: 1em;
}

.level2 {
  background-color: lightgrey;
  position: absolute;
  left: 0;
  margin-top: 2em;
}

li {
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  border: 1px dashed blue;
  text-transform: uppercase;
  font-weight: normal;
}

.expanded {
  font-weight: bold;
  text-decoration: underline;
}

<div class="container">
  <ul class="level1">
    <li>One</li>
    <li class="expanded">
      Two
      <ul class="level2">
        <li>Alpha</li>
        <li>Beta Gamma Delta</li>
        <li>Epsilon</li>
        <li>Zeta Eta Theta</li>
        <li>Iota</li>
      </ul>
    </li>
    <li>Three Four</li>
    <li>Five Six Seven</li>
    <li>Eight Nine Ten</li>
    <li>Eleven</li>
  </ul>
</div>

Answer 1

您始终可以将父级 ul 的位置设置为相对位置，然后子菜单可以具有 top:100% 的绝对位置，这将始终将其置于父级菜单下方。

来自 MDN

For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.

如下

.container {
    width: 600px;
    margin: auto;
}
ul {
    border: 1px solid lightgrey;
    width: 100%;
    text-align: center;
    padding: 1em;
    position: relative; /* positioning context */
}
.level2 {
    background-color: lightgrey;
    position: absolute;
    left: 0;
    top:100%; /* always at the bottom */
    margin-top: 2em; /* additional spacing */
}
li {
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    border: 1px dashed blue;
    text-transform: uppercase;
    font-weight: normal;
}
.expanded {
    font-weight: bold;
    text-decoration: underline;
}

<div class="container">
    <ul class="level1">
        <li>One</li>
        <li class="expanded">Two
            <ul class="level2">
                <li>Alpha</li>
                <li>Beta Gamma Delta</li>
                <li>Epsilon</li>
                <li>Zeta Eta Theta</li>
                <li>Iota</li>
            </ul>
        </li>
        <li>Three Four</li>
        <li>Five Six Seven</li>
        <li>Eight Nine Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
    </ul>
</div>

是否可以使用纯 CSS 水平设置嵌套列表的每个级别的样式？

Is it possible to style each level of a nested list horizontally using pure CSS?

html

css

css-position

html-lists