CSS: tree menu

Jednoduchý výpis stromového menu za použití CSS stylů.

Celá ukázka je dostupná na Codepenu: https://codepen.io/lukashron/pen/ExbeOja

HTML

<nav class="nav-tree" role="navigation">
    <ul>
        <li><a href="#">Item</a></li>
        <li>
            <a href="#">Item</a>
            <ul>
                <li><a href="#">Item</a></li>
                <li>
                    <a href="#">Item</a>
                    <ul>
                        <li><a href="#">Item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

CSS

.nav-tree {
  ul {
    position: relative;
    list-style: none;
		padding-left: 1rem;

    &:before {
      position: absolute;
      left: 8px;
      display: block;
      width: 1px;
      height: 100%;
      content: "";
      background-color: #f42956;
    }

    li {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
  }

  a {
    display: block;
		color: #ffffff;

    &:hover {
      color: #f42956;
    }
  }
}