Here is my site's URL:
I am encountering an issue with the navigation bar (#cssmenu can be found in the source code) on my website. I have set it up so that the links change colors upon hovering, which works well. However, I wanted to add a transition effect for the background-color to fade in and out. This feature works perfectly in Chrome, but only the sub-links (those under 'device' and 'category') are affected in Firefox. I am unsure of why this discrepancy exists.
#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;
}
#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;
}
(For more details, check the source code of the site--CTRL+F #cssmenu)
Attempts made to resolve the issue:
- Changed 'background' to 'background-color'
- Applied -moz-transition accordingly
- Experimented with the order and placement of transition attributes in the CSS code (e.g., under #cssmenu as well as #cssmenu:hover)