易于转换子菜单 [英] ease in transition of submenu

问题描述

我的 WordPress 博客使用了二十十四个主题.

I am using twenty fourteen theme for my WordPress blog.

这是一个仍在开发中的旅游博客......不过没关系.

It's a travel blog still in development... never mind the content though.

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

Anyway, I have one sub-menu on the main menu.

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

因此，如果您在菜单上滚动世界遗产站点:评论和信息"，您将看到一个子菜单，其中包含两个项目:地图视图"和列表视图"

so if you scroll over "WORLD HERITAGE SITES: REVIEWS & INFO" on the menu, you will see a sub-menu appear with two items: "map view" and "list view"

我的问题是:我在主菜单上使用了 css 缓入背景效果，当您将鼠标悬停在菜单项上时可以看到.但是，子菜单并没有缓和 - 它只是出现.

My question is: I am using a css easing-in background effect on the main menu as you can see when you hover over the menu items. However, the sub-menu does not ease in - it just appears.

我希望子菜单也能适应主菜单的转换时间(0.3s)

I would like the sub-menu to also ease in to match the transition time of the main menu (0.3s)

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

Any ideas? I tried to plug in the CSS code into places using chrome's dev tools, but nothing worked.

谢谢！

代码:

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

推荐答案

css 属性属性 auto not spported by transition property 一个不错的选择是使用 opacity

css property attibute auto not spported by transition property a nice alternative would be to use opacity

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

这篇关于易于转换子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！