var delay = 100;
$('li').each(function() {
$(this).animate({ 'margin-top': '-80px'}, delay += 100);
});
<body>
<nav>
<ul id="navi">
<li><img src="http://placehold.it/64x64" alt=""><span>Home</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>About</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>Search</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>Photos</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>Rss Feed</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>Podcasts</span></li>
<li><img src="http://placehold.it/64x64" alt=""><span>Contact</span></li>
</ul>
</nav>
</body>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
min-width: 800px;
}
#navi {
position: fixed;
width: 750px;
top: 0;
right: 10px;
}
#navi > li {
float: left;
width: 100px;
height: 100px;
text-align: center;
margin-right: 5px;
border: 1px solid #D6E9F5;
border-radius: 0 0 10px 10px;
background-color: #EEF6FB;
padding-top: 10px;
transition: all .5s;
}
#navi > li span {
display: block;
font-size: 13px;
letter-spacing: 2px;
color: #90C5E4;
}
#navi > li:hover {
margin-top: 0px !important;
background-color: #DAEBF6;
}