Html 简单动画css3菜单

我是一个新的HTML/CSS的家伙，我想学习HTML和CSS。现在我看到了这美妙的一幕；当您将鼠标悬停在菜单中的“关于我们”选项卡上时，子菜单上会出现一个动画。这就是我尝试重新创建的动画

以下是我尝试过的：

现在，一切都很好，下面是真正起作用的CSS：

.menu > li a:hover ~ .sub-menu{
    display: block;
    -webkit-animation-name: smallanim;
    -o-animation-name: smallanim;
    animation-name: smallanim;
    -webkit-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;

}

@keyframes smallanim {
    0% {
        transform:translateY(20px);
    }
    100% {
        transform:translateY(0px);  
    }
}

这是

.menu>li a:hover~。子菜单

这个选项基本上起作用。但这是正确的方法吗？如果将鼠标悬停在主菜单上，则会出现子菜单，但当您尝试将鼠标悬停在子菜单上时，该菜单将消失。我需要使用jQuery吗？

您需要这样做

.menu>li:将鼠标悬停在a~。子菜单

而不是

---

.menu>li a:hover~。子菜单

您需要

。menu>li:hover a~。子菜单

而不是

。menu>li a:hover~。子菜单

@BatuZet post-tat作为答案，并扣掉25分！