Wordpress CSS导航菜单悬停淡入淡出效果

我的wordpress网站导航菜单会直接弹出一个子菜单，你能帮我用它的CSS来平滑地弹出它并在屏幕上的子菜单中淡出吗

像这个例子：

我在wordpress上试过，但没用

 .main-navigation ul li ul.sub-menu 
{
 transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.main-navigation  ul.sub-menu:hover
{
 opacity: 1;
    height: auto;
    overflow: none;
}

我试过了，但没有成功

 .main-navigation ul li ul.sub-menu 
{
 transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.main-navigation  ul.sub-menu:hover
{
 opacity: 1;
    height: auto;
    overflow: none;
}

这是我的wordpress菜单导航css

{

。主导航{
利润上限：24px；
保证金上限：1.714285714rem；
文本对齐：居中；
}
.主导航李{
利润上限：24px；
保证金上限：1.714285714rem；
字体大小：12px；
字体大小：0.857142857rem；
线高：1.42857143；
}
.主导航a{
颜色：#5e5e；
}
.主导航a：悬停{
颜色：#21759b；
}
.主导航ul.nav-menu，
.主导航分区导航菜单>ul{
显示：无；
}
.主导航ul.nav-menu.toggled-on，
.菜单切换{
显示：内联块；
}

您正在为两个不同的元素设置样式

“.main navigation ul li ul.子菜单”不等于“.main navigation ul.子菜单：悬停”

当你修复这个bug时，如果它不起作用，试着用“ease in out”代替“ease”

---

：）

动画效果对我来说在chrome上的macAny上是有效的，为什么css末尾的

？