window.addEvent('domready', function(){
    var menu = new BouncyMenu('container');
});

var BouncyMenu = new Class({

  initialize: function(element){
        this.elements = document.id(element).getChildren();
        this.attach();
    },
    
    attach: function(){
        this.elements.each(function(element, index){
            
            element.set('tween',{ link: 'cancel' });
            
            element.addEvents({
                mouseenter: function(){
                    element
                     .set('tween',{ transition: 'bounce:out' })
                     .tween('padding-top', 30);
                },
                mouseleave: function(){
                    element
                     .set('tween',{ transition: 'circ:out' })
                     .tween('padding-top', 10);
                }
            });
            
        }, this);
        
        return this;
    }

});
<ul id="container">
    <li>The Dark Knight</li>
    <li>The Joker</li>
    <li>Two Face</li>
    <li>Alfred</li>
</ul>
li {
    float: left;
    padding: 10px;
    background: #f0f0f0;
    margin: 4px;
    cursor: pointer;
    color: #333;
    border-bottom: solid 1px #aaa;
}

ul#container {
    min-width: 400px;
}

body {
    font-family: helvetica, arial;
    font-size: 12px;
}