Question

The problem is when you leave the <a> the font color will revert back to its non hover color.

I want the color of the “About” text to be white even the cursor leaves the “About” link.

I’ve been trying to put all color: on the text on my hover link but no joy.

Here’s my fiddle

HTML

 <nav>
    <ul>
        <li class="n1">
            <a href="#">Home</a>
        </li> 
        <li class="n2">
            <a href="#">About</a>
            <ul class="menu">
                <li>
                    <a href="#">List 1</a>
                </li>
                <li>
                    <a href="#">List 2</a>
                </li>
                <li>
                    <a href="#">List 3</a>
                </li>
            </ul>
        </li> 
        <li class="n3">
            <a href="#">Contact</a>
        </li>        
    </ul>
</nav>​

CSS

nav {
    width 100%;
}

nav ul {
    list-type: none;
}

nav ul li {
    maring: 0;
    padding: 0;
}

nav ul li a {
    display: block;
    float: left;
    padding: 10px 20px;
    line-height: 1;
    color: dodgerblue;
    background: silver;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul li a:hover {
    color: white;
}

nav ul li.n2:hover > .menu {
    display: block;
}

.menu {
    position: absolute;
    top: 36px;
    left: 86px;
    background: silver;
    width: 93px;
    display: none;
}

.menu li a {
    color: white;
}

.menu li a:hover {
    color: dimgray;
}
​

Answer 1

You need to add the hover to the li

nav ul li:hover a {
    color:white;
}