How can I make my vertical drop down menu with an ease effect?

Question

JSFiddle # http://jsfiddle.net/UqyAq/

html -

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2
            <ul>
                <li>Sub-Button 1</li>
                <li>Sub-Button 2</li>
                <li>Sub-Button 3</li>
            </ul>
        </li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
    </ul>
</nav>

css -

* {
    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;
}

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.

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'?

Should I use javascript or css?

Answer 1

Use this code..

HTML:

<ul id="menu">
<li><a href="#">Link 1</a>
   <ul class="submenu">
     <li><a href="#">Sub Link 1.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 1.1.1</a></li>
          <li><a href="#"> Sub Link 1.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 1.2</a></li>
     <li><a href="#">Sub Link 1.3</a></li>
   </ul>
 </li>
 <li><a href="#">Link 2</a>
    <ul class="submenu">
     <li><a href="#">Sub Link 2.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 2.1.1</a></li>
          <li><a href="#"> Sub Link 2.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 2.2</a></li>
   </ul>
 </li>
 </ul>

CSS: .submenu { display: none; } #menu li ul{ margin-left:15px; }

JQUERY:

$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
                      function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
    $('ul:first', this).each(function () {
        var p = $(this).parent();
        $(this).css('top', p.position().top)
               .css('left', p.position().left + p.width())
               .show();
    });},
    function () { $('ul:first', this).hide(); }
);
});