Navbar coloring links - css

Question

I am having trouble with my navbar, and been stuck at this for some hours now.
My navbar looks like this:
<div id="pages">
<?php wp_nav_menu();?>
</div>
Very simple wordpress navbar. Wordpress gives every page on this menu automaticly a class name like .page-item-30 also wordpress gives them all the class .page-item.
What I want to achieve is so when i hover 1 Page the background turns red (#ff0000) and the font-color turns white; My css looks like this
#pages li{
display: inline;
float: left;
height: 20px;
padding: 5px;
margin: 0px;
margin-top: -17px;
transition: all 0.2s ease-in-out;
}
#pages li:hover{
background-color: #ff0000;
}
/**
.page-item-27:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-2:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-21:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
**/
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
.current_page_item {
background-color: #ff0000;
}
.current_page_item a{
color: white;
}
Now i tried using .page-item-27 or so do define when the font-color has to change but that is very unreliable since it relies on the right ID of the page. So If i have a new page with a ID not in my CSS my navigation doesnt work right.
Is there a way of changing the color of the font?
In my current css there is this
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
which in my Mind should work, but it doesn't.
If you don't understand it completly under danielps1.de you can check out my live-page. Just hover my navigation on the left
Thanks for the help

Answer 1

I think your problem is just a little mistake.
Your CSS selector should be:
.page_item a:hover{
color: white;
transition: all 0.2s ease-in-out;
}
Instead of:
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
Hope I could help.

Answer 2

Try using
li.page_item a:hover {
color: white;
}
as the CSS selector!