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


Tags: css,html5,css3,hover,mouseover

Problem :

This question already has an answer here:

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


Solution :

You must add this style:

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

Demo


    CSS Howto..

    how do I select second submit button to imply other color

    How to attach a CSS stylesheet to FXML?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to make my button display two different images once clicked?

    How to change background Image sizing

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How are these check-marks being drawn?

    How to write Text in css like show in images?

    How to code vertical banner

    HTML/CSS - How do I make divs to size according to their contents?

    How to place several elements in one row when using a list?

    how to strech select?

    How to set my span text vertical align and next to my image?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How to Format text boxes with Css

    How to get rid of “margin”

    How to get bean property on css file?

    How to target last row in a list with CSS?

    Sum of two divs widths is greater than parent width. How to make the browser resize the last div instead of moving it to the next line?

    How to css target “Tab” state of the input?

    How to prevent one table from obeying CSS rule

    How to use css to crop images from left and right without knowing dimensions

    In Jquery how to add Css?

    How to apply CSS page-break to print a table with lots of rows?

    How to create a list with 'pinned' items

    How to use nify javascript to make round corner box? Im using but not working

    How to contol a CSS property with Javascript

    How to access an svg inner id and have CSS change the fill color of that id?

    How to I change this css psuedo button in Javascript/Jquery

    How do I span columns with a div based table?