How to set the color of the menu item of the current page?

Question

css

Good afternoon. The task is this, I need the menu item to change its color when going to the n-th page (that is, if my menu is black, for example, and I'm on the main one, then the background of the "main" item should be blue), and when you hover over only the color of the text (but not the background) should change from white to blue.
I do it like this:

#header_nav {
height: 60px;
background: #363636;
margin: 20px 0 0 0;
}
#header_nav ul {
list-style: none;
}
#header_nav ul li {
float: left;
}
#header_nav ul li a {
color: #FFF;
line-height: 60px
padding: 043px;
display:block;
}
#header_nav ul li a:active{
background: #7487be;
color: #FFFFFF;
}
#header_nav ul li a:hover{
color: #7487be;
But it somehow works in a completely different way: the background changes when you click on the button and immediately disappears, while the color of the text is completely lost (apparently, it also becomes blue). Works correctly only on hover (background is black, text is blue, as it should be).
How to do it right?

Answer 1

Everything can be done through css and html, don't listen to anyone! If you need a solution - write it down!