title: Display condition in CSS
body: <p>I want to create a menu button for my responsive design.
  I want to display the menu when the user has clicked on the button, and hide it when he has clicked back.</p>
  
  <p>My Html code is the following:</p>
  
  <pre><code>&lt;!-- Invisible checkbox --&gt;
  &lt;input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" /&gt;
  
  &lt;!-- Menu button --&gt;
  &lt;label for="show_menu" class="btn btn-navbar"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/label&gt;
  </code></pre>
  
  <p>The associated CSS code I use is:</p>
  
  <pre><code>.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
  .menu_hidden_checkbox:checked +.left-menu{display:block;}
  </code></pre>
  
  <p>The above code isn't working at all. When the checkbox is checked, nothing happens.</p>
  
  <p>Did I make something wrong?</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/P8DJZ/" rel="nofollow noreferrer">http://jsfiddle.net/P8DJZ/</a> (Expand the row to see full screen/smartphone mode)</p>