Getting a <ul> to expand all the way inside an <li> tag how?

Question

I have an ul inside an li, and I want the ul to expand all the way to the left,right, and bottom of the li, not the top, I want issues to remain visible? I have tried all manner of ways to achieve this but I just cannot do it.

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

First of all, you are trying to ignore or suppress the padding style of parent element. This is not a good approach for css but to save the day, you can suppress padding by giving margin to child element like that.

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

For example of a better approach, you can use this to prevent suppress by dirty negative margin tricks and for a better, resuable css.

nav > ul {
    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));;
    list-style-type: none;
}


.nested{
    margin-top: 0;
    padding-left: 0;
}

.nested li {
    background-image: none;
    background-color: red;
    padding:.5em;

}

ul.parent > li > a
{
   display:block;
   padding:.5em;

}

<nav>
<ul class="parent">
            <li>
                <a>Issues</a>
                <ul class="nested">
                    <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>