<main>
  <nav>
    <form id="navi">
      <ul class="nav__list">
        <li class="nav__list-entry nav__list-entry--depth-0">
          <label for="nav__list-checkbox1">
            <a href="#">Link ohne Unterpunkte</a>
          </label>
          <input type="checkbox" id="nav__list-checkbox1">
        </li>

        <li class="nav__list-entry nav__list-entry--depth-0 nav__list-entry--has-subnavi nav__list-entry--is-checked">
          <label for="nav__list-checkbox2">
            <a href="#">Link mit Unterpunkten</a>
          </label>
          <input type="checkbox" id="nav__list-checkbox2" checked="checked">
          <ul class="nav__list">
            <li class="nav__list-entry nav__list-entry--depth-1">
              <label for="nav__list-checkbox3">
                <a href="#">Unterpunkt 1</a>
              </label>
              <input type="checkbox" id="nav__list-checkbox3">
            </li>
            <li class="nav__list-entry nav__list-entry--depth-1 nav__list-entry--has-subnavi">
              <label for="nav__list-checkbox4">
                <a href="#">Unterpunkt 2</a>
              </label>
              <input type="checkbox" id="nav__list-checkbox4">
              <ul class="nav__list">
                <li class="nav__list-entry nav__list-entry--depth-2">
                  <label for="nav__list-checkbox5">
                    <a href="#">Unter-Unterpunkt 1</a>
                  </label>
                  <input type="checkbox" id="nav__list-checkbox5">
                </li>
                <li class="nav__list-entry nav__list-entry--depth-2">
                  <label for="nav__list-checkbox6">
                    <a href="#">Unter-Unterpunkt 2</a>
                  </label>
                  <input type="checkbox" id="nav__list-checkbox6">
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </form>
  </nav>
</main>
nav {
  width: 280px;
  background-color: #333;
  padding: 30px 0;
  height: 100%;
  ul {
    margin: 0;
    padding: 0;
  }
  a {
    color: $white;
    text-decoration: none;
  }
  .nav__list-entry {
		position: relative;
		padding: 6px 0 6px 25px;
		list-style: none;
		margin-top: 4px;
		margin-bottom: 4px;
		&:hover {
			background-color: #444;
		}
		input {
			position: absolute;
			left: 22px;
			margin-left: 0;
			opacity: 0;
			z-index: 2;
			cursor: pointer;
			height: 1em;
			width: 1em;
			top: 6px;
		}
		&.nav__list-entry--is-checked { //Klasse hinzuf├╝gen im HTML
			background-color: #444;
		}
		&.nav__list-entry--has-subnavi label {
			cursor: pointer;
			&:after {
				content: '';
				position: absolute;
				left: 0;
			}
		}
		&.nav__list-entry--has-subnavi > input + ul:before {
			content:'';
			position: absolute;
			left: 20px;
			top: 7px;
			width: 16px;
			height: 16px;
			background-color: #00A8A8;
		}
		&.nav__list-entry--has-subnavi > input + ul:after{
			content:'\203A';
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      font-size: 28px;
      line-height: 0em;
      color: #FFF;
			position: absolute;
			left: 24px;
			top: 14px;
		}
		&.nav__list-entry--has-subnavi > input:checked + ul:after {
			content:'\203A';
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
			left: 26px;
			top: 15px;
		}

		input:checked + ul {
			height: auto;
		}
		input:checked + ul > li { 
			display: block; 
		}
		input + ul > li { 
			display: none;
		}

		> a,
		> label a {
			margin-left: 20px;
			display: block;
		}
	}
}


View Compiled
Rerun