<input type="checkbox" id="toggle">
<label for="toggle">МЕНЮ</label>
  <p class="to-be-changed">
   
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
  <a href="#" class="aaa">subМеню</a>
   
   
   
  </p>

.to-be-changed {
  display:none;
   
  transition-duration:0.5s;
  border-radius:20px 10px 20px 10px;
   
}
   
input[type=checkbox]:checked ~ .to-be-changed {
  display:block;
  transition-duration:0.5s;
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
   
label {
  display: block;
  background: #08C;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: white;
  font-weight: bold;
  width:150px;
  height:20px;
  transition-duration:0.5s;
}
   
input[type=checkbox]:checked ~ .to-be-changed {
  color: red;
}
.aaa {
  margin-top:3px;
  display: block;
  background: #e3e3e3;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: black;
  font-weight: bold;
  width:150px;
  height:20px;
  transition-duration:0.5s;
}
.aaa:hover {
  background:#AFAFAF;

}