悬停时如何更改导航栏链接上的文本颜色（和背景）？

将鼠标悬停在导航栏链接上时，我想更改其颜色。我更改了背景，但是我希望在悬停时更改背景和文本。请注意，它适用于子链接，但不适用于主导航链接。

有人可以悬停在它们上方时，让我看看如何使文本变色吗？

这是我的结果：http : //jsfiddle.net/BWnta/13/

谢谢你。

这是html：SJ Expo NavBar下拉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

这里是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;
}