title: css3 transition dropdown onclick
body: <p>In the following example when you click <strong><em>Click me</em></strong>, a navigation menu opens.</p>
  
  <p><a href="http://jsfiddle.net/pxY2L/" rel="nofollow" title="Example"><strong>Example</strong></a></p>
  
  <p>Does anyone know how to apply a css3 transition dropdown effect to the <strong><em>navigation-dropdown</em></strong>, since there is no <strong><em>:onclick</em></strong> in css?<strong>*</strong></p>
  
  <p><em><strong></em>*</strong> while keeping <strong><em>navigation-dropdown</em></strong> on an auto height (I don't want a fixed height for the dropdown menu).</p>
  
  <p><strong>Code:</strong> (See example for the entire code)</p>
  
  <p></p>
  
  <pre><code>&lt;div id="navigation"&gt;
    &lt;div id="navigation-sub"&gt;Click me&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="navigation-dropdown"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;link one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link four&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;link five&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link six&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link seven&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link eight&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;link nine&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link ten&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link eleven&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link twelve&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;input type="button" value="X"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>