Trying to make nav text change color when hovering over the button and not only the text

Question

I made a nav with padding on each side and a background color. I have a default color on the text and made the background turn another color when hovered. The issue is that i want the text to change color when the background is hovered and not the text only because i need to use the same color as the default text for the background color[when hovered] right now if i hover then it will basically be invisible text since the background and text will be the same color. I want the text color to change even when hovering the space outside the text and not the text exclusively.

jsfiddle - http://jsfiddle.net/ucsk99cL/

<aside class="sidebar">
    <nav>
        <ul>
            <li style=""><a href="">home</a></li>
            <li><a href="">about us</a></li>
            <li><a href="">orders</a></li>
            <li><a href="">gallery</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </nav>
</aside>




.sidebar{
float:left;
margin:20px;
margin-right:150px;
}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
}


nav ul li{
padding-top:26px;
padding-bottom:26px;
padding-left:57px;
padding-right:57px;
margin-bottom:3px;
background-color: #CBAFA2;
}

nav ul li:hover{
background-color: #3D2316;
}

Answer 1

Just change the color when hovering over the parent, li element:

Updated Example

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

And if you want to be able to click anywhere within the li, you would have to add the padding to the anchor elements as opposed to the li elements. Just change the display to inline-block so that it respects the padding. I also made a few other changes, see the example.

nav ul li a {
    padding:26px 58px;
    display:inline-block;
}