title: Menu using Tiles and SubTiles with pure CSS
body: <p>I try to make a menu with tiles and sub-Tiles with pure CSS.
  when click on one of the tiles of one color, all other tiles disappear and only the sub-tiles of that color appear.
  I face the problem that only the tiles in div after that tile disappear.
  the tiles be in div before that tile don't.
  image describe the experiment.
  check the code snippet.
  thanks in advance 
  Cheers
  Chris</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#reset + label { display: block; }
  
  label { display: none }
  input[type="radio"] { display: none; }
  div { display: none; }
  
  input[type="radio"]:checked + label ~ label,
  input[type="radio"]:checked + label ~ label ~ div { display: none; }
  
  input[type="radio"]:checked + label ~ div { display: block; }
  
  input[type="radio"][id="reset"]:checked ~ label { display: block; }
  
  div {
      transition:all 1s;
  }
  label {
      width:23%;
      float:left;
      text-align:center;
      background:#ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      color:#222222;
      padding:0.5%;
      margin:0.5%;
      margin-bottom:30px;
      cursor:pointer;
      opacity: 1;
      transition:all 1s;
  }
  .tile, .sub-tile {
      width:23%;
      height:100px;
      float:left;
      transition:all 1s;
      margin:0.5%;
      padding:0.5%;
  }
  
  .green, .top-green{
      background:#66dd99;
  }
  .blue, .top-blue {
      background:#6666ff;
  }
  .red, .top-red {
      background:#ff4466;
  }
  .purple, .top-purple {
      background:purple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;input type="radio" name="color" class="reset" checked id="reset" /&gt;
      &lt;label for="reset"&gt;Reset&lt;/label&gt;
  
      &lt;input type="radio" id="blue" class="blue" name="color" /&gt;
          &lt;label for="blue" class="tile top-blue"&gt;BLUE&lt;/label&gt;
          &lt;div class="sub-tile blue"&gt;1&lt;/div&gt;
          &lt;div class="sub-tile blue"&gt;2&lt;/div&gt;
          &lt;div class="sub-tile blue"&gt;3&lt;/div&gt;
          &lt;div class="sub-tile blue"&gt;4&lt;/div&gt;
          &lt;div class="sub-tile blue"&gt;5&lt;/div&gt;
          &lt;div class="sub-tile blue"&gt;6&lt;/div&gt;
  
  
          &lt;input type="radio" id="red" class="red" name="color"/&gt;
          &lt;label for="red" class="tile top-red"&gt;RED&lt;/label&gt;
  
          &lt;div class="sub-tile red"&gt;7&lt;/div&gt;
          &lt;div class="sub-tile red"&gt;8&lt;/div&gt;
          &lt;div class="sub-tile red"&gt;9&lt;/div&gt;
          &lt;div class="sub-tile red"&gt;10&lt;/div&gt;
  
          &lt;input type="radio" id="purple" class="purple" name="color"/&gt;
          &lt;label for="purple" class="tile top-purple"&gt;PURPLE&lt;/label&gt;
  
          &lt;div class="sub-tile purple"&gt;16&lt;/div&gt;
          &lt;div class="sub-tile purple"&gt;17&lt;/div&gt;
          &lt;div class="sub-tile purple"&gt;18&lt;/div&gt;
          &lt;div class="sub-tile purple"&gt;19&lt;/div&gt;
          &lt;div class="sub-tile purple"&gt;20&lt;/div&gt;
          &lt;div class="sub-tile purple"&gt;21&lt;/div&gt;
  
          &lt;input type="radio" id="green" class="green" name="color"/&gt;
          &lt;label for="green" class="tile top-green"&gt;GREEN&lt;/label&gt;
          &lt;div class="sub-tile green"&gt;12&lt;/div&gt;
          &lt;div class="sub-tile green"&gt;13&lt;/div&gt;
          &lt;div class="sub-tile green"&gt;14&lt;/div&gt;
          &lt;div class="sub-tile green"&gt;15&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>