I need assistance changing the text color of my navigation bar links when hovering over them. The background is currently changing, but I want both the background and text to change simultaneously when hovered over. It seems to be working for the sub links, but not the main navigation links.
Could someone please provide guidance on how to achieve this effect of changing the text color upon hover?
Here are the results: http://jsfiddle.net/BWnta/13/
Thank you.
Here is the html: SJ Expo NavBar Dropdown HTML5
<link rel="stylesheet" href="NavBar-MonctonExpo.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="http://wellness-expo.com/index.htm" TARGET="_blank">Main</a>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Wellness-Expo-Moncton.htm">Moncton</a>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Seminars.htm">Lecture Schedule</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/Lecture/Schedule.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/Lecture/Fall/Schedule.htm">Fall</a>
</li>
</ul>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Exhibitors.htm">Exhibitor List</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Spring.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Fall.htm">Fall</a>
</li>
</ul>
</li>
<li> <a href="http://wellness-expo.com/Moncton/ToExhibit.htm">To Exhibit</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/ToExhibit-Spring.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/ToExhibit-Fall.htm">Fall</a>
</li>
</ul>
</li>
<li><a href="http://wellness-expo.com/Moncton/Contact-Us.htm" TARGET="_blank">Contact Us</a>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<!-- Nav end -->
</html
HERE IS THE CSS:
#body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: #DFF7EB;
font-family: Arial;
}
#nav_wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #C6F7D4;
color:#FFF;
}
#nav ul li a, visited {
color: #69716D;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
color: #FFF;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #C6F7D4;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #FFF;
}