navbar menu slide down slowly

Learn how to implemente a tree-view navbar. Trying to do when clicking the menu list slides down slowly.

<div class="container">
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="section dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>
            <%= link_to 'AAA'.titleize, "/aaa", :class => 'dropdown-toggle' %>
          </li>
          <li> <%= link_to 'BBB'.titleize, "/bbb", :class => 'dropdown-toggle' %></li>
          <li><%= link_to 'CCC'.titleize, "/ccc", :class => 'dropdown-toggle' %></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$('ul.nav li.dropdown').hover(function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>