我有这个网站:http://bit.ly/1p1Dr9W
这个导航看起来有点空白。我很想给它添加 css 动画。我尝试使用不透明度,但它没有按预期工作。我做错了什么?
我在每个导航元素上添加了悬停动画并且它工作正常,但我想将动画添加到整个导航菜单,所以子菜单元素的整个列表将打开一些动画(例如缓慢的不透明度到 1) .
这是我得到的:
#menu-menyy li ul {
background-color: transparent; }
#menu-menyy li ul:hover {
background-color: #00a3fc !important;
-o-transition:.8s;
-ms-transition:.8s;
-moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;}
但是整个导航菜单仍然只是弹出,当我将鼠标移到实际菜单上时,我看到了背景中的过渡。这毕竟可以用 CSS 完成还是用 jquery 完成?
最佳答案
将CSS更改为
#menu-menyy li ul {
opacity: 0; }
#menu-menyy li:hover ul {
background-color: #00a3fc !important;
opacity: 1.0;
-o-transition: opacity .8s;
-ms-transition: opacity .8s;
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
关于css - 动画 Wordpress 站点导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24045558/