The short answer:
change your styles to the following:
The long answer (explanation):
An anchor tag("<a>") has its own default style - usually blue when unfollowed, purple after you’ve visited, underlined, hand cursor etc…
You are obviously trying to override that style so your menu “looks” like, well, a menu.
The problem however is that you’ve styled the color of the <a> on line 22. This style will then be respected unless it is overridden.
However when you hover over the <li> (and NOT on the <a>) the logic is that you have ONLY hovered on the <li> and NOT on the <a>. Therefore the color defined above still applies… You have NOT hovered on the <a> and so it repects the pinkish color as defined above.
So, the simple way around this is to separate the style of the <li> from the style of the <a> (as above) and then ONLY style the <a> on the NEEDED properties (i.e. color and text-decoration).
And the final key of the magic here is to use “inherit” for the color property which tells the <a> to use the same color as its container (parent). So, when the <li> color changes, so does the <a>.
Hope this helps.