title: How can I make my vertical drop down menu with an ease effect?
body: <p>JSFiddle # <a href="http://jsfiddle.net/UqyAq/" rel="nofollow">http://jsfiddle.net/UqyAq/</a></p>
  
  <p>html - </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;Button 1&lt;/li&gt;
          &lt;li&gt;Button 2
              &lt;ul&gt;
                  &lt;li&gt;Sub-Button 1&lt;/li&gt;
                  &lt;li&gt;Sub-Button 2&lt;/li&gt;
                  &lt;li&gt;Sub-Button 3&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Button 3&lt;/li&gt;
          &lt;li&gt;Button 4&lt;/li&gt;
          &lt;li&gt;Button 5&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>css -</p>
  
  <pre class="lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  
  nav {
      height: 100%; width: 18%;
      position: absolute;
  }
  nav ul {
      list-style-type: none;
      font-family: 'Universal Accreditation', Serif;
      font-size: 18pt;
      letter-spacing: 1px;
      font-variant: small-caps;
      color: black;
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li {
      display: block;
  }
  
  nav ul li:hover ul {
      display: block;
  }
  </code></pre>
  
  <p>Basically, you are looking at a simple un-ordered list drop down menu. I am trying to figure out what I need to use to create an easing effect on the drop down of the second tier. Hovering over 'Button 2' will bring up the sub-menu.</p>
  
  <p>Notice how its a one jump movement. How would I slow it down? Maybe look like the sub-menu is sliding out from under 'Button 2'?</p>
  
  <p>Should I use javascript or css?</p>