CSS only collapsible vertical three level menu (with checkboxes) and Context Menu

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

HTML

<link rel="stylesheet" href="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js"></script>
<h2>CSS only collapsible TreeView with Context Menu (Right Click)</h2>
<div class="treeview hover">
  <ul>
    <li>
      <input type="checkbox" id="cb-1" checked>
      <label for="cb-1">
        <span class="contextMenuItem" id="1">lorem ipsum</span>
      </label>
      <ul>
        <li><span class="contextMenuItem" id="2">dolor sit amet</span></li>
        <li>
          <input type="checkbox" id="cb-1-2">
          <label for="cb-1-2">
            <span class="contextMenuItem" id="3">consetetur sadipscing</span>
          </label>
          <ul>
            <li><span class="contextMenuItem" id="4">elitr</span></li>
            <li><span class="contextMenuItem" id="5">sed diam nonumy</span></li>
          </ul>
        </li>
        <li><span class="contextMenuItem">eirmod tempor</span></li>
        <li><span class="contextMenuItem">invidunt ut</span></li>
        <li><span class="contextMenuItem">labore et dolore</span></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="cb-2" checked>
      <label for="cb-2">
        <span class="contextMenuItem">magna aliquyam</span>
      </label>
      <ul>
        <li><span class="contextMenuItem">erat sed</span></li>
        <li><span class="contextMenuItem">diam voluptua</span></li>
        <li><span class="contextMenuItem">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;
 ...

JavaScript

$(function() {
        $.contextMenu({
            selector: 'span.contextMenuItem', 
            callback: function(key, options) {
                var m = "clicked: " + key + " on element of id " + options.$trigger.attr("id");
                window.console && console.log(m) || alert(m); 
            },
            items: {
            		"add": {name: "Add", icon: "paste"},
                "edit": {name: "Edit", icon: "edit"},
                "delete": {name: "Delete", icon: "delete"},
                
            }
        });
    });