How to modify the CSS of an active link?

Good day,

I’m trying to modify the css of an active link in the main menu and I can’t seem to get there.
I used the new styling options of the main menu with a border.

I inserted this code in the custom css and nothing happens :
/*——————————-active link menu—————————- */
.header_color .main_menu ul:first-child > li.current-menu-item > a:active, .header_color .main_menu ul:first-child > li.current_page_item > a:active {
color: #732b2d !important;
border-color: #732b2d #732b2d !important;
}

Basically, I would like to have the same css as when you hover over the menu links when the link is active. This is the CSS when I hover over the menu:
#top #header .av-main-nav > li:hover > a {
color: #732b2d;
background-color: #ffffff;
}

Thank you.