Conflicting css styles in Chrome - css

Question

Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF

Answer 1

add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}

Answer 2

(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}