动画Wordpress站点导航菜单

Question

我有一个网站：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做的呢？

Answer 1

将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;
}