CSS Sidebar — как сохранить вид дерева и сделать выделение всей строки (без учёта отступа)?

Question

[Diesel-nick]

Как сделать сад бар в виде дерева с (т.е. меню потомков должно отступать от края на большее расстояние чем родитель) и при этом при a:hover выделять всю строку (а не ту часть где начинается <a>)

Пример на 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;
    }
  }
}

Comments

[Константин Башаркевич]

Ограничение по вложенности есть?

[Diesel-nick]

Константин Башаркевич: лучше конечно не ограничивать, но думаю не более 10

[Константин Башаркевич]

Diesel-nick: Куда ж вам так много? Единственный вариант, который я вижу, это прописать правила для всех уровней вложенности с отступами не у списков, а у конкретных ссылок в списках, мол чем больше уровень вложенности - тем больше отступ слева у ссылки. Но что-то это слишком стремненькое решение ;)

Answer 1

[artem_music]

Можно попробовать псевдоэлементами

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

Comments

[Константин Башаркевич]

У li position: relative, а значит left: 0 все равно будет прижато к левому краю элемента списка

[artem_music]

Константин Башаркевич: для ul можно тоже relative

Answer 2

[Ankhena]

:hover применять не к ссылке, а к li
у ссылок увеличивать отступ, у li - нет.

Если количество уровней вложенности известное, то стилями.
Если нет, то придется считать, например js'ом.