Css nested list with active item to fill the whole row

Question

I have an unlimited nested list that serves as a menu. I have an .active list item to add a background color to the anchor.

I would like it to fill the whole row with the background color, not start a few tabs in. That means I would need the a tag to fill the whole row and at the same time have the text appear indented.

.menu {
  background: #eee;
  width: 300px;
}

.menu > ul {
  margin-left: -25px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding-left: 25px;
}

li.active a {
  background: red;
}

a {
  display: block;
}

<div class="menu">
<ul>
  <li><a href="#">Level 1</a></li>
  <li>
    <ul>
      <li>
        <ul>
          <li class="active">
            <a href="#">Level 3</a>
          </li>
        </ul>
        <a href="#">Level 2</a>
       </li>
    </ul>
    <a href="#">Level 1</a>
   </li>
  <li><a href="#">Level 1</a></li>
</ul>
</div>

Answer 1

I would use a pesudo-element to create the background like this:

.menu {
  background: #eee;
  width: 300px;
  overflow: hidden;
}

.menu>ul {
  margin-left: -25px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding-left: 25px;
  position: relative;
}

li.active:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -1000px; /* a big value so it works with any level*/
  background: red;
  z-index: 0;
}

a {
  display: block;
  position: relative;
  z-index: 1;
}

<div class="menu">
  <ul>
    <li><a href="#">Level 1</a></li>
    <li>
      <ul>
        <li>
          <ul>
            <li class="active">
              <a href="#">Level 3</a>
            </li>
          </ul>
          <a href="#">Level 2</a>
        </li>
      </ul>
      <a href="#">Level 1</a>
    </li>
    <li><a href="#">Level 1</a></li>
  </ul>
</div>