我有这个网站: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 - Animate Wordpress网站导航菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24045558/

10-11 13:53