CSS Drop Down Menu Source Code

<nav>
  <label for="touch"><span>title</span></label>
  <input type="checkbox" id="touch" />

  <ul class="slide">
    <li><a href="#">ITEM 1</a></li>
    <li><a href="#">ITEM 2</a></li>
    <li><a href="#">ITEM 3</a></li>
    <li><a href="#">ITEM 4</a></li>
  </ul>
</nav>

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color : #111111;
}
li a {
  text-decoration : none; 
  color : #2d2f31;
}
nav {
  width : 300px;
  background:#f5f5f5 ;
  margin : 40px auto;
  border-radius: 10px;
}
span {
  padding : 30px;
  background : #ffffff;
  color : #111;
  font-size : 1.2em;
  font-variant : small-caps;
  cursor : pointer;
  display: block;
  border-radius: 10px;
}
span::before{
  float: right;
  right: 10%;
  content: "+";
}
.slide {
  clear:both;
  width:100%;
  height:0px;
  overflow: hidden;
  text-align: center;
  transition: height .4s ease;
}
.slide li {
  padding : 30px;
}
.slide li:hover {
  background:#d5d5d5 ;
  color: #000000;
}
#touch {
  position: absolute; 
  opacity: 0; 
  height: 0px;
}
#touch:checked + .slide {
  height: 300px;
}