html - CSS - 在悬停时影响元素的全宽，而不删除填充

Question

我有一系列嵌套 ul和 li元素，以创建侧边栏导航系统。当用户将鼠标悬停在 li 之一上时元素 我希望背景的整个宽度发生变化(如右图所示)，而不仅仅是容器内部(如左图所示)。

我遇到的问题是，为了改变整个宽度，我需要删除 ul padding-left然后删除列表元素的缩进和“嵌套”外观。
下面的示例显示了当前存在的行为，其中 background-color不会改变整个宽度。最好我不必为每个元素手动添加缩进，因为嵌套填充按原样工作得很好，但我愿意接受建议:D

* {
  box-sizing: border-box;
}

nav {
  width: 100px;
  background-color: lightgrey;
}

li {
  list-style: none;
}

ul {
  padding-left: 10px;
}

a {
  color: black;
  text-decoration: none;
  padding: 5px;
  display: inline-block;
  width: 100%;
}

a:hover {
  background-color: grey;
  color: white;
}

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Work</a></li>
    <ul>
      <li><a href='#'>Piece 1</a></li>
      <li><a href='#'>Piece 2</a></li>
    </ul>
    <li><a href='#'>Contact</a></li>
  </ul>
 </nav>

我的问题 :

如何制作li整个宽度的背景悬停时更新，而不删除嵌套列表项的缩进。

为什么是width: 100% li元素不会在导航栏外溢出？因为我认为width: 100%意味着它们的宽度与其父的宽度相同，这肯定是因为它们缩进意味着它们会超出。

谢谢!
发布答案 编辑
接受的答案绝对是好的，但我最终得到的解决方案是根据对象使用 JavaScript 动态生成导航栏元素。

Answer 1

此解决方案适用于任意数量的嵌套级别。

诀窍是使用 CSS counter 填充水平。

* {
  box-sizing: border-box;
}

nav {
  display: inline-block;
  background-color: lightgrey;
}

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


li {
  counter-increment: section;
  counter-reset: section;
}

a:before {
  content: counters(section, '');
  opacity: 0
}

a {
  color: black;
  text-decoration: none;
  padding: 5px;
  display: block;
}

a:hover {
  background-color: grey;
  color: white;
}

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Work</a>
      <ul>
        <li><a href='#'>Piece 1</a></li>
        <li><a href='#'>Piece 2</a>
          <ul>
            <li><a href='#'>Piece 2.1</a></li>
            <li><a href='#'>Piece 2.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'>Contact</a></li>
  </ul>
</nav>