animated dropdown menu

i solved it myself:

jquery:

$("#topNav > ul > li").hover(function(){
var liNum = $(this).find("ul").find("li").length;
var liHeight = $(this).height();
var i = 1;
var minus = 20;
$(this).find("ul").find("li").each(function(){
if(i <= liNum){
$(this).animate({"opacity":"1" , "top":((i*liHeight)-minus)+"px"} , {duration: 300});
minus --;
i++;
}
});
},function(){
$("#topNav > ul > li > ul > li").animate({"top":"0" , "opacity":"0"} , {duration:100});
});

css:

#topNav ul{
    height: 35px;
    padding: 0;
    margin: 0;

    list-style: none;
    border: 0;
}
#topNav ul li{
    width: 70px;
    height: 35px;

    text-align: center;
}
#topNav ul li ul{
    display: block;
}
#topNav ul li ul li{
    position: absolute;
    top: 0;
    opacity: 0;
}
#topNav > ul{
    position: relative;
    top: 0;
    right: 50px;
    display: -webkit-box;
}
#topNav  > ul > li{
    background-color: #ffffff;
}
#topNav > ul > li:hover{
    background-color: #5ea2d8;
    box-shadow: 0 -3px 0 0 #fd8d13 inset;
    -webkit-transition: box-shadow 0.3s,height 0.5s;
}
#topNav > ul > li:hover ul{
    position: relative;
    display: block;
    top: 0;
    right: 50px;
    padding: 0;
}
#topNav ul li:hover ul li{
    width: 100px;
    right: -65px;
}
#topNav a{
    position: relative;
    top: 8px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
}
#topNav a:hover{
    color: #ffffff;
}