<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>
nav {
  width: 280px;
  background-color: #333;
  padding: 30px 0;
  height: 100%;
  position: absolute;
  ul {
    margin: 0;
    padding: 0;
  }
  a {
    color: #FFF;
    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: 4px;
		}
		&.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: 3px;
			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: 9px;
		}
		&.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: 25px;
			top: 11px;
		}

		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