Just delving into CSS and have successfully crafted a dropdown menu. It's all smooth sailing in Chrome and IE, but Firefox presents two challenges:
1) The color gradient appears darker in Firefox compared to the lighter green in Chrome and IE.
2) An extra 7px width is added on the right side of the menu in Firefox. While this space has the background of my nav ul element, it doesn't seem to be associated with any li elements.
To tackle the second issue, I've observed that Firefox introduces space around li elements. Consequently, I preceded and followed the li elements in the HTML code with comment codes. Should I make adjustments to margin, padding, or display properties in my CSS instead?
Any insights on resolving these issues would be greatly appreciated!
HTML:
<nav>
<ul><!--
--><li><a class="MenuLinks" href="#">About Us</a><!--
--><ul><!--
--><li><a href="#">Mission & Vision</a></li><!--
--><li><a href="#">How Do We Contribute?</a></li><!--
--><li><a href="#">History</a></li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Renewable Energy</a><!--
--><ul><!--
--><li><a href="#">What is Renewable Energy?</a></li><!--
--><li><a href="#">The Future of Renewable Energy</a></li><!--
--><li><a href="#">Towards Sustainable Living</a></li><!--
--></ul><!--
-->/li><!--
--><li><a class="MenuLinks" href="#">Our Projects</a><!--
--><ul><!--
--><li><a href="#">Current Projects</a></li><!--
--><li><a href="#">Past Projects</a></li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">Education</a><!--
--><ul><!--<!--
--><li><a href="#">ALTENER Education</a></li><!--
--><li><a href="#">Learning Materials</a></li><!--
--><li><a href="#">Partners in Education</a></li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks" href="#">How to Participate</a><!--
--><ul><!--
--><li><a href="#">Make a Donation</a></li><!--
--><li><a href="#">Volunteer with Us</a></li><!--
--><li><a href="#">Become a Partner</a></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;
}
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;
}
nav ul ul {
background: #F7F7F7;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
font-size: 14px;
}
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;
}