Как сделать список с вложенностями в css?

Question

[billt]

Есть дизайн:

Как видно на дизайне, нужно сделать дерево с вложенностями, то есть что бы у списка потомка был отступ, но что бы сам элемент списка был на всю ширину (видно при наведении). У меня получается сделать отступ, но из-за этого отступа айтем уже не будет на всю ширину:
https://monosnap.com/file/fkMX4yYLl0NhL8VC6nO06xEM...

Как сделать так, что бы отступы на влияли на ширину вложенных айтмов?

Comments

[Hyubert]

В таком случае не важна вложеность

<ul>
  <li></li>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <li></li>
</ul>

ul {
  padding-left: 20px;
}

ul > li {
  padding-left: 20px;
}

Answer 1

[Олег]

Использовать padding-left а не margin

Comments

[billt]

https://jsfiddle.net/11drb3fv/2/
Можете показать как?

Answer 2

[Максим Тимофеев]

css рулит:

li > li {padding-left:20px;}
li > li > li {padding-left:40px;}
li > li > li > li {padding-left:60px;}

Comments

[billt]

А если в дереве будет неопрееленное кол-во потомков?

[Максим Тимофеев]

billt: Тогда на сервере будете вставлять n спанов. Каждый будет делать отступ