CSS3アニメーションの問題

Question

私はcss3アニメーションを使用してロールオーバーでこのナビゲーションバーを持っています。アニメーションが完了するまで機能します。ロールオーバで白く保つ方法はありますか？

ライブサイト：http://daveywhitney.com/nav/3/

CSS：

#menu{ 
    height : 50px; 
    overflow-y : hidden; 
    float:left; 
    border:5px solid #FAFEFF; 
    -webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px; 
} 
.menu-item { 
    height : 100px; 
    width : 100px; 
    cursor : pointer; 
    display : inline-block; 
    animation-name:menu; 
    animation-duration:1s; 
    /* Firefox */ 
    -moz-animation-name:menu; 
    -moz-animation-duration:1s; 
    /* Safari and Chrome */ 
    -webkit-animation-name:menu; 
    -webkit-animation-duration:1s; 
} 
@keyframes menu{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 

@-moz-keyframes menu/* Firefox */ 
{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 

@-webkit-keyframes menu/* Safari and Chrome */ 
{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 
.menu-item:hover{ 
    animation-name:menuhover; 
    animation-duration:.3s; 
    /* Firefox */ 
    -moz-animation-name:menuhover; 
    -moz-animation-duration:.3s; 
    /* Safari and Chrome */ 
    -webkit-animation-name:menuhover; 
    -webkit-animation-duration:.3s; 
} 
@keyframes menuhover{ 
    from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 

@-moz-keyframes menuhover/* Firefox */ 
{ 
from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 
@-webkit-keyframes menuhover/* Safari and Chrome */ 
{ 
from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 
.menu-item .up{ 
    width : 100%; 
    height : 50%; 
    background-color:#147A7F; 

} 
.menu-item .down{ 
    background-color:#fff; 
    width : 100%; 
    height : 50%; 

} 

#nav-text { 
    text-align:center; 
    padding:15px 0 0 0; 
} 

Answer 1

が.menu-item:hoverスタイルにmargin-top: -50pxを追加し、それがアニメーションの終了後にそれを使用します。