title: Animated submenu pure css
body: <p>I tried to make a menu, which has 3 menu items and 1 subitem. If I click on second item, first child item should display. But not normally display it. It should animate it and slide it. I think there is a way with <code>transition</code> but I don't really know CSS3. And I want to have a pure css solution.</p>
  
  <p>Here my HTML code:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Second&lt;/a&gt;
              &lt;ul class="child"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;First child&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I created this <strong><a href="http://jsfiddle.net/3kEg4/" rel="nofollow">fiddle</a></strong>. Now I want to show <code>First child</code> menu item slowly if I click on <code>Second</code> menu item.</p>
  
  <p>The only thing that I did before was checking <code>transition</code> but I just don't get it.</p>
  
  <p>Can someone give me a hint?</p>
  
  <p>Cheers</p>