jQuery OS X Stack and Drop Stack http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

stack_drop_menu.css

.stack { position: fixed; bottom: 28px; right: 40px; }  
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }  
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }  
.stack ul li { position: absolute; }  
.stack ul li img { border: 0; }  
.stack ul li span { display: none; }  
.stack .openStack li span {   
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  
    display:block;  
    height: 14px;  
    position:absolute;  
    top: 17px;  
    right:60px;  
    line-height: 14px;  
    border: 0;  
    background-color:#000;  
    padding: 3px 10px;  
    border-radius: 10px;  
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px;  
    color: #fcfcfc;  
    text-align: center;  
    text-shadow: #000 1px 1px 1px;  
    opacity: .85;  
    filter: alpha(opacity = 85);  
}  
  
/* IE Fixes */  
.stack { _position: absolute; }  
.stack ul { _z-index:-1; _top:-15px; }  
.stack ul li { *right:5px; }  

stack_drop_menu.html

<div class="stack">  
    <img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/stack.png" alt="stack">  
    <ul id="stack">  
        <li><a href=""><span>Aperture</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/aperture.png" alt="Aperature"></a></li>  
        <li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>All Examples</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/photoshop.png" alt="Photoshop"></a></li>  
        <li><a href="example3.html"><span>Example 3</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/safari.png" alt="Safari"></a></li>  
        <li><a href="example2.html"><span>Example 2</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/coda.png" alt="Coda"></a></li>  
        <li><a href="index.html"><span>Example 1</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/finder.png" alt="Finder"></a></li>            
    </ul>  
</div>

stack_drop_menu.js

$(function () {   
    // Stack initialize  
    var openspeed = 300;  
    var closespeed = 300;  
    $('.stack>img').toggle(function(){  
        var vertical = 0;  
        var horizontal = 0;  
        var $el=$(this);  
        $el.next().children().each(function(){  
            $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);  
            vertical = vertical + 55;  
            horizontal = (horizontal+.75)*2;  
        });  
        $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')  
           .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);  
        $el.animate({paddingTop: '0'});  
    }, function(){  
        //reverse above  
        var $el=$(this);  
        $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);  
        $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);  
        $el.animate({paddingTop: '35'});  
    });  
      
    // Stacks additional animation  
    $('.stack li a').hover(function(){  
        $("img",this).animate({width: '56px'}, 100);  
        $("span",this).animate({marginRight: '30px'});  
    },function(){  
        $("img",this).animate({width: '50px'}, 100);  
        $("span",this).animate({marginRight: '0'});  
    });  
});

it's a great work, but doesn't work correctly with the latest jQuery version(let's say 2.0.2)
All icons go out of the boundary of screen, please fix it.

Here is the example with jQuery v2.0.2 http://jsfiddle.net/qrFZX/
and a working example with jQuery v1.7 http://jsfiddle.net/pnKtY/

Many thanks