如何让<li>标签内的<ul>元素向左右下完全扩展？

问题场景 #

在<li>内嵌套<ul>，需要该<ul>向父<li>的左侧、右侧、底部完全扩展，顶部不延伸，同时保持父元素内的"Issues"文本可见。

修改后的代码实现 #

CSS代码

nav > ul {
    width: 80%;
    right: 0;
    overflow: auto;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

ul > li {
    box-sizing: border-box;
    background-image: linear-gradient(rgb(220, 220, 220), rgb(255, 255, 255));
    padding: .5em;
    list-style-type: none;
    position: relative; /* 设置为子元素定位的参考容器 */
}

.issues {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* 顶部紧贴父li底部，避免向上扩展 */
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

.issues li {
    background-image: none;
    background-color: red;
    width: 100%;
    padding: .5em;
    box-sizing: border-box; /* 确保padding不会超出容器宽度 */
}

HTML代码

<nav>
  <ul>
    <li>
      <a>Issues</a>
      <ul class="issues">
        <li><a>x</a></li>
        <li><a>y</a></li>
        <li><a>z</a></li>
      </ul>
    </li>
    <li><a>Press Releases</a></li>
    <li><a>Donate</a></li>
  </ul>
</nav>

核心改动说明 #

1. 给父级<li>添加position: relative，让子级<ul>的绝对定位基于该元素
2. 将.issues设置为position: absolute，通过left:0和right:0实现左右铺满父元素宽度
3. 使用top:100%让子列表顶部刚好对齐父<li>的底部，完全满足顶部不扩展的要求
4. 给.issues li添加box-sizing: border-box，避免内边距导致元素宽度超出容器

内容的提问来源于stack exchange，提问作者user10673486