title: Menu toggle with options inside using only CSS
body: <p>I'm trying to create a menu with options inside. I'm using only CSS with <code>checkbox</code> and <code>radio</code> inputs.</p>
  
  <p>By changing one of the options, I also want the menu to close. I tried this using <code>label</code> inside <code>label</code>, but it doesn't work.
  My prototype code:</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>input {
    display: none;
  }
  
  label {
    cursor: pointer;
  }
  
  label span:hover {
    font-weight: 600;
  }
  
  .opener .menu {
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    color: #4d4d4d;
    padding: 12px 4px;
    width: 270px;
  }
  
  #menu:checked~.opener .menu {
    display: none;
  }
  
  #menu~.opener&gt;span:nth-of-type(1) {
    display: none;
  }
  
  #menu:~.opener&gt;span:nth-of-type(2) {
    display: block;
  }
  
  #menu:checked~.opener&gt;span:nth-of-type(1) {
    display: block;
  }
  
  #menu:checked~.opener&gt;span:nth-of-type(2) {
    display: none;
  }
  
  .box {
    height: 50px;
    width: 50px;
    margin: 20px 0;
  }
  
  #red:checked~.box {
    background-color: red;
  }
  
  #blue:checked~.box {
    background-color: blue;
  }
  
  #green:checked~.box {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="menu" type="checkbox"&gt;&lt;/input&gt;
  &lt;input id="red" type="radio" name="opcoes" checked&gt;&lt;/input&gt;
  &lt;input id="blue" type="radio" name="opcoes"&gt;&lt;/input&gt;
  &lt;input id="green" type="radio" name="opcoes"&gt;&lt;/input&gt;
  
  &lt;label class="opener" for="menu"&gt;&lt;span&gt;Open&lt;/span&gt;&lt;span&gt;Close&lt;/span&gt;
        &lt;div class="menu"&gt;
          &lt;label for="red"&gt;&lt;span&gt;red&lt;/span&gt;&lt;/label&gt;
  &lt;label for="blue"&gt;&lt;span&gt;blue&lt;/span&gt;&lt;/label&gt;
  &lt;label for="green"&gt;&lt;span&gt;green&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;/label&gt;
  
  &lt;div class="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or you can check here: <a href="https://codepen.io/anon/pen/JxzPKR" rel="nofollow noreferrer">https://codepen.io/anon/pen/JxzPKR</a></p>
  
  <p>Is there a way to close the menu when you click on one of the options without JavaScript?</p>