title: CSS only drop down menu - CSS3 transition
body: <p>Im creating a drop down menu. Pretty simple works well on a desktop. I need to use the same markup for responsive too. Imagine the menu appears when a user clicks a menu-icon, then simply all the list items are stacked underneath each other.</p>
  
  <p>When the user hovers over 'menu item 1' then the 'sub-menu- appears. At the moment I simply have it to appear and disappear on hover. It doesn't look very nice. I was wondering if there was a simple way to use a CSS3 transition to make this drop down nicely.</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>CSS</p>
  
  <pre><code>.sub-menu{
   display:none;
  }
  
  li.sub-menu-parent:hover .sub-menu {
   display: block;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;nav&gt;
     &lt;ul&gt;
       &lt;li class="sub-menu-parent"&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;
         &lt;ul class="sub-menu"&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Item 1&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Item 2&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Item 3&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Item 4&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/li&gt;&lt;/ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Menu Item 5&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/nav&gt;
  </code></pre>