1)
This is a flaw in Firefox's handling of the transparent
keyword. It treats it the same as rgba(0,0,0,0)
, so the colour goes from black to light green. (Of course the black is fully transparent at first, but halfway down the gradient it's already dark grey.)
So the solution is to use the transparent version of the end colour #c8dc9a for the start colour, in rgba form. This is rgba(200,220,154,0)
. Same for the popup items, where the colour becomes rgba(226,154,14,0)
.
nav ul {
background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 100%);
background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 100%);
...
nav ul li:hover {
background: #e29a0e;
background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
...
By the way, it's better to put the unprefixed version of the gradient style on the bottom, after all the vendor-prefixed ones. Only then can you be sure that a browser which can use the formally defined one, actually does.
2)
It's not the margin or the padding that refuses to play nice, it's the text-indent. So I removed it and added some padding and margins to the inner list, to ensure it kept looking the same way.
See demo fiddle.