html - Firefox 上网站导航栏的 CSS 转换的特殊情况

Question

我的站点地址是 http://applocity.blogspot.com/

我有一个导航栏(如果您想在源代码中找到它，请使用#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)

到目前为止我尝试了什么:

1. 用背景颜色代替背景
2. 使用 -moz-transition...当然
3. 重新排序并放置我在 CSS 代码中放置过渡属性的位置(例如在#cssmenu 和#cssmenu:hover 下。

Answer 1

我想通了。这是我的解决方案的链接。 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。 这是 fiddle

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