title: Pure HTML and CSS toggleable drop-down menu
body: <p>So I've found these two tip pages where the principle is explained: use :hover to make the drop-down show up and the checkbox to toggle it open or closed</p>
  
  <p>I got it to sot of work but I have issue when I come to CSS styling. It's pretty simple to style the :hover state. What isn't so simple is to style the toggled open drop down menu since where's to parent CSS selector. I really want not to use JavaScript. </p>
  
  <p>So I paste the code I got to sort of workingon JSfiddle. The position of the check box isn't important for now.
  <a href="http://jsfiddle.net/Z2L4c/" rel="nofollow">My code</a></p>
  
  <p>this part(at the bottom of th css) is the problem.</p>
  
  <pre><code>nav ul li #chktut:checked:parent {
          background: #4b545f;
          background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
  </code></pre>