/* [COLLAPSIBLE] */
#menutree label {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}
#menutree input[type=checkbox] {
  display: none; /* Hide ugly checkbox */
}

/* Hide/collapse by default */
li.collapse ul {
  visibility: hidden;
  opacity: 0;
  max-height: 0; /* CSS bug. Cannot animate height... */
  transition: all 0.5s;
}
label::after {
  content: "\25b6";
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s;
}

/* Show when checked */
li.collapse input:checked ~ ul {
  visibility: visible;
  opacity: 1;
  max-height: 999px; /* Just give a big enough height for animation */
}
li.collapse input:checked ~ label::after {
  transform: rotate(90deg);
}