html - 简单的动画 CSS 3 菜单

Question

我是 HTML/CSS 新手，我想学习 HTML 和 CSS。现在我看到了这个精彩website ;当您将鼠标悬停在菜单中的关于我们选项卡上时，子菜单上会出现一个动画。那是我尝试重新制作的动画。

这是我尝试过的:JS Fiddle .

现在，一切正常，下面是真正起作用的 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 ~ .sub-menu 这个选择基本上可以解决问题。但这是正确的做法吗？如果您将鼠标悬停在主菜单上，则会出现子菜单，但是当您尝试将鼠标悬停在子菜单上时，菜单会消失。我需要使用 jQuery 吗？

Answer 1

你需要做的

.menu > li:hover a ~ .sub-menu

代替

.menu > li a:hover ~ .sub-menu