Q:

On hover li change li link color

I am struggling to change the font color of that particular li when hover over .
 The text is hyperlinked. Currently the font color is changing when you hover over the link.But I want it to be happened on hover over whole li.
Here is my code
<nav class="top_menu">
    <ul class="black_high">
        <li class="first"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

Demo: http://jsfiddle.net/squidraj/h2zu5xx2/
I am not sure if I have to use some kind of js/jquery to achieve this? Please suggest. Thanks in advance. 

A:

You don't need any script or plugin, just the right CSS. In your CSS, change the line:
.top_menu ul li a:hover

To:
.top_menu ul li:hover a

Fiddle: http://jsfiddle.net/praveenscience/h2zu5xx2/1/

