title: Pure CSS horizontal drop menu, show in click instead of hover
body: <p>Is it possible with pure CSS? That instead of showing a dropdown when I hover over "Test", show it when I click on "Test".</p>
  
  <p>Also keep the yellow link color on "Test" when I have that dropdown open.</p>
  
  <p>My current CSS</p>
  
  <pre><code>nav { 
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
  }
  
  nav ul {
  list-style: none;
  }
  
  nav ul li {
  display: inline-block;
  text-align: left;
  }
  
  nav a {
  display:block;
  padding:0 20px;
  transition: color .2s;
  color: black;
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
  text-decoration: none;
  }
  
  nav ul ul li a { color: #FFFF64; }
  nav ul ul li a:hover { color: #99A7EE; }
  nav a:hover { color: #FFFF64; }
  nav ul ul { display: none; position: absolute; }
  nav ul li:hover &gt; ul { display: inherit; }
  nav ul ul li { background: #000; display: list-item; position: relative; }
  nav ul ul li:hover { background: #333; }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hn93jyvc/" rel="nofollow">http://jsfiddle.net/hn93jyvc/</a></p>