How to change text color (and background) on nav bar links when hovering?

Question

I would like to change the color of the text on my navigation bar links when hovering over them. I have the background changing but I want both the background and text to change when hovering. Notice it works on the sub links but not the main navigation links.

Can someone show me how to make the text change color when hovering over them?

Here are my 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;
}
                            /*notes--old text or background colors (CCC, 4a0,  )*/

#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;
}

Answer 1

You must add this style:

#nav ul li:hover a{ 
     color:#FFF;
}

Demo