CSS: menu is displayed with right space in Firefox - css

Question

I have just started with CSS and have created a dropdown menu. Everything looks good in Chrome and IE, but with Firefox I run into two problems:
1) The gradient is not the light green as in Chrome or IE, but a heavier/darker grey.
2) The menu is displayed with an extra 7px on the right side. These 7px are not just empty space, as it has the background of my nav ul element, but it is not part of (though maybe caused by) any li elements.
Regarding the second issue, I have found that Firefox adds space around li elements, and I therefore added comment codes before and after the li elements in the HTML code. Do I need to adjust my margin, padding or display in my CSS instead?
Hope someone can help me out here!
HTML:
<nav>
<ul><!--
--><li><a class="MenuLinks" href="#">About Us</a><!--
--><ul><!--
--><li>Mission & Vision</li><!--
--><li>How Do We Contribute?</li><!--
--><li>History</li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Renewable Energy</a><!--
--><ul><!--
--><li>What is Renewable Energy?</li><!--
--><li>The Future of Renewable Energy</li><!--
--><li>Towards Sustainable Living</li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Our Projects</a><!--
--><ul><!--
--><li>Current Projects</li><!--
--><li>Past Projects</li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Education</a><!--
--><ul><!--<!--
--><li>ALTENER Education</li><!--
--><li>Learning Materials</li><!--
--><li>Partners in Education</li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">How to Participate</a><!--
--><ul><!--
--><li>Make a Donation</li><!--
--><li>Volunteer with Us</li><!--
--><li>Become a Partner</li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Contact Us</a><!--
--></li><!--
--></ul>
</nav></td>
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: linear-gradient(to bottom, transparent 30%, #c8dc9a 100%);
background: -moz-linear-gradient(top, transparent 30%, #c8dc9a 100%);
background: -webkit-linear-gradient(top, transparent 30%, #c8dc9a 100%);
background: -ms-linear-gradient(top, transparent 30%, #c8dc9a 100%);
background: -o-linear-gradient(top, transparent 30%, #c8dc9a 100%);
padding: 0;
margin: 0;
font-size: 16px;
text-indent: 7px;
white-space: nowrap;
list-style: none;
position: relative;
text-align: left;
display: inline-block;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border-bottom: 3px solid #244612;
}
/* Set hover properties for main menu items */
nav ul li:hover {
background: #e29a0e;
background: linear-gradient(to bottom, transparent 0%, #e29a0e 100%);
background: -moz-linear-gradient(top, transparent 0%, #e29a0e 100%);
background: -webkit-linear-gradient(top, transparent 0%, #e29a0e 100%);
background: -ms-linear-gradient(top, transparent 0%, #e29a0e 100%);
background: -o-linear-gradient(top, transparent 0%, #e29a0e 100%);
}
nav ul li:hover a {
color: #000000;
}
nav ul li:hover ul li a{
color: #757575;
}
nav ul li a {
display: block;
padding: 10px 13px;
color: #757575;
text-decoration: none;
}
/* Set general properties for dropdown menu items */
nav ul ul {
background: #F7F7F7;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
font-size: 14px;
}
/* Set hover properties for dropdown menu items */
nav ul ul li {
float: none;
border-top: 1px solid #C9CCCF;
border-bottom: 0px solid #C9CCCF;
position: relative;
}
nav ul ul li a {
padding: 10px 25px;
}
nav ul li:hover ul li a:hover {
background: #e29a0e;
color: #000000;
}

Answer 1

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.