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>

Мои вопросы :

1. Как сделать фон всей ширины li обновление при наведении, без удаления отступа для вложенных элементов списка.

2. Почему элементы width: 100% li не выходят за пределы навигационной панели? Поскольку я думал, что width: 100% означало, что их ширина была такой же, как ширина их родителей, что, разумеется, с отступом означало бы, что они будут простираться за пределы.

Спасибо!

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>

Answer 2

Если вы хотите, чтобы ссылки были шириной списка, вы можете удалить заполнение неупорядоченного списка (ul). Вместо этого поместите отступы на ссылки:

* {
  box-sizing: border-box;
}

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

li {
  list-style: none;
  width: 100%;
}

ul {
  padding-left: 0;
}

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

ul ul li a{
  padding-left: 25px;
}

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>