(HTML & CSS) How have a checkbox appear when another checkbox is checked

So I want to create something where if I check a checkbox (say Checkbox A), it will cause another fully-functioning checkbox (say Checkbox B) to appear. So far I managed to make the Checkbox B appear when Checkbox A is checked. However, if Checkbox B is clicked, nothing happens.

HTML:

<div class="arrow">
  <label for="togglearrow">.</label>
    <input type='checkbox' id="togglearrow"/>

    <label for="tasks">.</label>
      <input type='checkbox' id="toggletasks">

    <label for="tasksmenu">test</label>

CSS:

.arrowmenu {
  margin: 0 30px 0 0;
}

Arrow button

label[for="togglearrow"] {
  background: url('arrow2.png') no-repeat;
  background-size: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 0);
  bottom: 15px;
  left: 8px;
  font-size: 0px;
  line-height: 26px;
  display: none;
  width: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Hides checkbox

#togglearrow {
display: none;
}


#toggletasks {
  display: none;
}

label[for="togglearrow"] {
    display: block;
    cursor: pointer;
}

Tasks button that shows up when the arrow button is checked/clicked.

label[for="tasks"] {
  cursor: pointer;
  position: absolute;
  background: url('tasks.png') no-repeat;
  background-size: 100%;
  /*display: none;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

This is the code that allows the user to click the arrow button to show the tasks button.

#togglearrow:checked + label[for="tasks"] {
  background-size: 100%;
  display: block;
  text-decoration: none;
  font-size: 0px;
  height: 30px;
  width: 30px;
  bottom: 13px;
  left: 55px; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for="tasksmenu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

This is the code that is supposed to allow the user to click the tasks button to open up a menu, however, nothing happens when I click on the tasks button.

#toggletasks:checked + label[for="tasksmenu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}