Question

我是一个新的HTML / CSS人，我只是想学习HTML和CSS，现在我看到了这个精彩的website，看看当你将鼠标悬停在菜单中的about us标签上时子菜单上有一个动画。这就是我尝试重新创建的动画。

这是我尝试过的：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吗？那是唯一的解决方案吗？

谢谢。

ALX-Z

Answer 1

你需要做

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

而不是

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

简单的动画CSS-3菜单

1 个答案: