Menu slide animation

HTML

<div>
    <dl>
        <dt>Titre</dt>
        <dd><a href="">Lien 1</a></dd>
        <dd><a href="">Lien 2</a></dd>
        <dd><a href="">Lien 3</a></dd>
        <dd><a href="">Lien 4</a></dd>
    </dl>
</div>

CSS

dl{margin-top:100px;}
dl dt{
    position:absolute;
    z-index:100;
    width:150px;
    height:50px;
    margin-top:-50px;
    background:blue;
    color:white;
}
dl:nth-child(2) dt{margin-left:150px;}
dl dd{
    opacity:0;
    position:absolute;
    /*-webkit-transform:translateY(0px);*/
    -webkit-animation:slideUp 0.7s;
}
dl:hover dd{
    opacity:1;
    -webkit-animation:slideDown 0.7s;
}

dl dd a{
    display:block;
    height:50px;
    width:250px;
    background:rgba(0,0,0,0.5);
}


dl dd:nth-child(2){
    margin-top:0px; 
    -webkit-animation-delay:0.4s;   
}
dl dd:nth-child(3){
    margin-top:50px; 
    -webkit-animation-delay:0.3s;   
}
dl dd:nth-child(4){
    margin-top:100px;   
    -webkit-animation-delay:0.2s;
}
dl dd:nth-child(5){
    margin-top:150px;   
    -webkit-animation-delay:0.1s; 
}



@-webkit-keyframes slideDown{
    from{-webkit-transform:translateY(-300px);opacity:0;}
    80%{-webkit-transform:translateY(30px);opacity:0.8;}
    to{  -webkit-transform:translateY(0);opacity:1;}
}
@-webkit-keyframes slideUp{
    from{-webkit-transform:translateY(0px);opacity:1;}
    20%{-webkit-transform:translateY(30px);opacity:0.8;}
    to{  -webkit-transform:translateY(-300px);opacity:0;}
}