CSS Sidebar - how to keep the tree view and make the selection of the entire line (ignoring indentation)?

Question

css

How to make a garden bar in the form of a tree with (i.e. the descendant menu should recede from the edge by a greater distance than the parent) and at the same time a:hoverselect the entire line (and not the part where it starts <a>)
Example at jsfiddle.net

<span>Sidebar</span>
<div id="sidebar">
  <ul>
    <li class="nav-item">
      <a href="#" class="nav-link">One item</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Two item</a>
    </li>
    <ul class="submenu">
      <li class="nav-item">
        <a href="#" class="nav-link">Submenu one item</a>
      </li>
      <ul class="submenu">
        <li class="nav-item">
          <a href="#" class="nav-link">Submenu one item</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Submenu two item</a>
        </li>
      </ul>
      <li class="nav-item">
        <a href="#" class="nav-link">Submenu two item</a>
      </li>
    </ul>
  </ul>
</div>

#sidebar {
  background: #e8e8ee;
  width: 300px;
  ul {
    list-style: none;
  }
  .nav-link {
    display: block;
    line-height: 40px;
    text-decoration: none;
    &:hover {
      background: green;
    }
  }
}

Answer 1

You can try pseudo-elements

ul{
padding-left:20px;
}
li{
position:relative;
}
a:hover:after{
content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:green;
}

Answer 2

:hover is applied not to the link, but to li
for links to increase the indent, for li - no.
If the number of nesting levels is known, then styles.
If not, then you have to consider, for example, js.