title: CSS Dropdown Menu Appear Animation
body: <p>I am using a list for the nav for the nav of my website and when a user hovers over certain list items a dropdown appears with extra navigation options. In my case when a user hovers over the "Brands" item then a dropwdown appears with all the different brands. At the moment the dropdown appears instantly however I'd like it to appear in a motion as if it is sliding down rather than just appearing instantly. Is this possible with CSS or do I need some jQuery magic ?? Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;section id="nav"&gt;
  
          &lt;div id="nav-wrapper"&gt;
  
              &lt;ul id="nav-list"&gt;
  
                  &lt;li id="nav-home"&gt;&lt;a href=""&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="nav-brands"&gt;&lt;a href=""&gt;Brands&lt;/a&gt;
                      &lt;ul id="brands-list"&gt;
                          &lt;li&gt;&lt;a href=""&gt;Brand 01&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Brand 02&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Brand 03&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Brand 04&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Brand 05&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li id="nav-about"&gt;&lt;a href=""&gt;About Us&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="nav-contact"&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>#nav-brands { position:relative; }
  
  #nav-list li:hover ul { display: block; opacity: 1; visibility: visible; background-color: #fff; }
  
  #brands-list { padding: 10px 0px 0px 0px; position: absolute; top: 20px; left: -35px; width: 120px; box-shadow: none; display: none; opacity: 0;
                 visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s;
                 -o-transition: opacity 0.2s; -transition: opacity 0.2s; border:thin solid #000000; border-radius:0px 0px 5px 5px;
                 border-top:0px;
  }
  
  #brands-list li { display: block; margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; text-align:center; border-bottom:thin solid #CECECE;
  
  }
  
  #brands-list li:hover {}
  
  #brands-list li:last-child { border-bottom:0px; }
  </code></pre>