CSS only collapsible vertical three level menu (with checkboxes)

seen in http://codepen.io/galaxija737/pen/bKrEL

by lovromar

HTML

<h2>CSS only collapsible TreeView</h2>
<div class="treeview hover">
  <ul>
    <li>
      <input type="checkbox" id="cb-1" checked>
      <label for="cb-1">
        <span>lorem ipsum</span>
      </label>
      <ul>
        <li><span>dolor sit amet</span></li>
        <li>
          <input type="checkbox" id="cb-1-2">
          <label for="cb-1-2">
            <span>consetetur sadipscing</span>
          </label>
          <ul>
            <li><span>elitr</span></li>
            <li><span>sed diam nonumy</span></li>
          </ul>
        </li>
        <li><span>eirmod tempor</span></li>
        <li><span>invidunt ut</span></li>
        <li><span>labore et dolore</span></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="cb-2" checked>
      <label for="cb-2">
        <span>magna aliquyam</span>
      </label>
      <ul>
        <li><span>erat sed</span></li>
        <li><span>diam voluptua</span></li>
        <li><span>At vero eos</span></li>
      </ul>
    </li>
  </ul>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

@import url('http://fonts.googleapis.com/css?family=Handlee');
html,
body {
  background-color: #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Open Sans Condensed', sans-serif;
}
h2 {
  font-family: 'Handlee', cursive;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 1em;
  margin-bottom: 0;
}
.treeview {
  float: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.treeview:hover input ~ label:before,
.treeview.hover input ~ label:before {
  opacity: 1.0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.treeview ul {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  list-style: none;
  padding-left: 1em;
}
.treeview ul li span {
  -webkit-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.treeview ul li span:hover {
  color: rgba(255, 255, 255, 0.9);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.treeview input {
  display: none;
}
.treeview input:checked ~ ul {
  display: none;
}
.treeview input ~ label {
  cursor: pointer;
}
.treeview input ~ label:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  margin-left: -1em;
  margin-top: 0.4em;
  border-width: 4px;
 ...