@import url(https://fonts.googleapis.com/css?family=Roboto);

body{

}

.wrapper{
margin: 5% auto;
  width: 400px;

}

ul{
  list-style: none;
  margin: 0;
  padding: 0;

}

label{
  display: inline-block;
  cursor: pointer;
  padding: 0px;
  border: 1px solid #fff;
  border-bottom: none;
}

label:hover{
/*   width:100%; */
  color: #68A4C4;  /* hover color */
}

label.last{
  /*
  border-bottom: 1px solid #fff;
  */
}

ul ul li{
  padding: 15px;  /* sub item indent */
}

input[type="checkbox"]{
  position: absolute;
  left: -9999px;
}

input[type="checkbox"] ~ ul{
  height: 0;
  transform: scaleY(0);
}

input[type="checkbox"]:checked ~ ul{
  height: 100%;  /* this does drop down */
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1);
}

input[type="checkbox"]:checked + label{

/*  border-bottom: 1px solid #fff; */
}