css - 轻松过渡子菜单

Question

我正在为我的 WordPress 博客使用二十十四个主题。

这是一个仍在开发中的旅游博客...不过不要在意内容。

无论如何，我在主菜单上有一个子菜单。

网站是: http://www.journeywithandrew.com/

因此，如果您滚动菜单上的“世界遗产站点:评论和信息”，您将看到一个包含两个元素的子菜单:“ map View ”和“ ListView ”

我的问题是:我在主菜单上使用了 css 缓入背景效果，正如您将鼠标悬停在菜单项上时所看到的那样。然而，子菜单并没有缓和——它只是出现了。

我希望子菜单也能缓入以匹配主菜单的过渡时间(0.3 秒)

有什么想法吗？我尝试使用 chrome 的开发工具将 CSS 代码插入到一些地方，但没有任何效果。

谢谢!

代码:

a {
  -o-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -ms-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -moz-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  -webkit-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
  transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
}

Answer 1

css 属性属性 auto 不受过渡属性支持，一个不错的替代方法是使用不透明度

    .primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul{
      opacity:1;
    }

    .primary-navigation ul ul{
     transition:all 0.3s ease 0s;
     opacity:0;
    }