Changing colour of link in list without altering hover CSS - html

Question

This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.
I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?
Fiddle here: http://jsfiddle.net/CWB9C/1/
HTML:
<div id="menubar">
<ul>
<li> Home
</li>
<li>Facebook
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Google.com
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Search</li>
</ul>
</div>
CSS:
body {
text-align: center;
}
#menubar ul{
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menubar ul li{
font: 18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
color:#666;
text-decoration:none;
}
#menubar ul li{
font: 18px;
font-family: latolight;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
}
#menubar ul li:hover {
background: #A03C3A;
color: #D6D6D6;
}
#menubar ul li ul{
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
color:#666;
text-decoration:none;
}
#menubar ul li ul {
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
text-shadow: 0 -1px 0 #000;
z-index:10;
color:#666;
text-decoration:none;
}
#menubar ul li ul li:hover {
background:#4F529F; z-index:10;
}
#menubar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:10;
}

Answer 1

Style the a's not li's, or just set to all the a's
a { color:inherit; text-decoration:none; }

Answer 2

Just create a style that will apply to both li and li > a:
#menubar ul li, #menubar ul li a {
color:#666;
font: 18px;
font-family: latolight;
text-decoration: none;
/* Add whatever additional style you want */
}
jsFiddle

Answer 3

From what I'm reading, I think this is what you want
#menubar a {
color: #whatevershadeofgrayhere;
text-decoration: none;
}
#menubar a:hover {
color: #whatevershadeofwhitehere;
}

Answer 4

#menubar ul li:hover a{
color:#fff;
}

Answer 5

You can use the inherit value for color.
#menubar ul li a {
color: inherit;
}
Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.
#menubar ul li ul li {
color: black;
}
fiddle
(nice menu by the way)