How to animate a dropdown menu using CSS3 animations?

I would like to add a CSS3 effect to my dropdown. (Just like that one in Instagram.com on "My profile").

I'm using Animate.css for the CSS3 effects.

I tried this, but it doesn't work.

HTML

<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a>

<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
   <li><%=link_to "Facebook", "#"%></li>
   <li><%=link_to "Email", "#" %></li>
</ul>

JS

$(document).ready(function(){
    $('a').hover(function(){
        $("ul").addClass('animated bounceInDown');
    });
});

You can find a live version on Zapping.io