与CSS转换为网站的导航栏上的Firefox

奇特的情况下

我的网站地址是http://applocity.blogspot.com/与CSS转换为网站的导航栏上的Firefox

我有一个导航栏（#cssmenu如果你想找到它的源代码）和一些奇怪的原因，这是发生：我做到了，所以链接在悬停时改变颜色，并且工作正常。但我想添加一个转换，以便背景颜色通过淡入淡出来改变颜色。这在Chrome上运行良好，但只适用于Firefox上的子链接（例如设备和类别下）。我一直无法弄清楚为什么会发生这种情况。

#cssmenu a { 

background: #999999; 
color: #FFF; 
-webkit-transition: background 1s ease; 
-moz-transition: background 1s ease; 
-ms-transition: background 1s ease; 
-o-transition: background 1s ease; 
transition: background 1s ease; 
padding: 0px 25px; 

//border-radius: 5px; (NOT ACTIVE) 
} 

    #cssmenu ul li:hover > a { 

background: #66FF99; 
    color: #000000; 
-webkit-transition: background-color 0.3s ease; 
-moz-transition: background-color 0.3s ease; 
-ms-transition:background 0.3s ease; 
-o-transition: background-color 0.3s ease; 
transition: background-color 0.3s ease; 
}

（有更多的网站的源代码 - CTRL + F #cssmenu）

我试过到目前为止：

把代替背景颜色背景
使用-moz-transition ...当然
重新排序并放置在CSS代码中的转换属性（例如在#cssmenu以及#cssmenu：hover中）

来源

2013-02-21 somil

你声明一个HTML5的doctype？不知道这是否会做任何事情。 – 2013-02-21 01:12:53

对于这种有趣的东西，jQuery非常适合完整的跨浏览器兼容性！ – LazerSharks 2013-02-21 01:51:13

你为什么用'span'包裹'a'？ – 2013-02-21 04:09:41

我想通了。这里是我的解决方案的链接。 http://jsfiddle.net/mrytF/2/

问题来自第59-61行。您有此代码：

.cssmenu a { 
    -moz-transition: background 1s ease; 
}

当.cssmenu不存在时。所以我评论了这个代码，现在它在Firefox中正常工作。我也谈到了一些CSS，我认为是多余的

希望这有助于

编辑

修正了问题，不具有子菜单显示。这里的主要问题是，你需要将第22行作为#cssmenu ul li.hover，当它需要是#cssmenu ul li:hover。这里是小提琴

http://jsfiddle.net/mrytF/3/

来源

2013-02-21 04:28:16

我没有浏览代码的最后部分，因为我很累;）希望这有助于 – 2013-02-21 04:37:58

与CSS转换为网站的导航栏上的Firefox

回答

相关问题