title: How to make pure CSS dropdown menu appear with a fade in/slowly
body: <p>As the title suggest, I'm trying to make a pure CSS drop down menu. The only thing is I cannot get the dropdown to fade in slowly no matter what I've tried. </p>
  
  <p>Here's the JSFiddle
  <a href="http://jsfiddle.net/UWgCV/" rel="nofollow">http://jsfiddle.net/UWgCV/</a></p>
  
  <p>FYI It's not my terrible code, it's from the previous designer who abandoned the project. </p>
  
  <p>Thanks. </p>
  
  <p>edit: I need to accompany this post with code because of the jsfiddlet link, so here is the menu.</p>
  
  <pre><code>    &lt;li&gt;&lt;a href="/emergencyservices/whatwedo.php" accesskey="3" title=""&gt;EMERGENCY SERVICE &amp;nbsp; &amp;nbsp;|&lt;/a&gt;
                     &lt;ul&gt;
                     &lt;li&gt;&lt;a href="/emergencyservices/whatwedo.php"&gt;&amp;nbsp;What We Do&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/emergencyservices/howstaffed.php"&gt;&amp;nbsp;How We Are Staffed&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/emergencyservices/referralemerghandling.php"&gt;&amp;nbsp;Emergency/Referral Procedure&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/emergencyservices/typesofemerg.php"&gt;&amp;nbsp;Types of Emergencies&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/emergencyservices/whattoexpect.php"&gt;&amp;nbsp;What to Expect On Arrival&lt;/a&gt;&lt;/li&gt;
                     &lt;/ul&gt;
              &lt;/li&gt;
  </code></pre>