如何让 <ul> 在 <li> 标签内一直展开？

Question

我在 li 中有一个 ul，我希望 ul 一直扩展到 li 的左侧、右侧和底部，而不是顶部，我希望问题保持可见？我尝试了各种方法来实现这一目标，但我就是做不到。

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;
}


.issues {
    /*display: none;*/
    position: static;
    margin-top: 0;
    padding-left: 0;
}

.issues li {
    background-image: none;
    background-color: red;
    width: 100%;
    padding: .5em .5em .5em 0;
}

<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>

Answer 1

首先，您试图忽略或抑制父元素的填充样式。这对于 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;
}


.issues {
    /*display: none;*/
    position: static;
    margin-top: 0;
    padding-left: 0;
    margin:0.5em -0.5em -0.5em -0.5em;
}

.issues li {
    background-image: none;
    background-color: red;
    width: 100%;

}

<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>