Hex Codes Unique to Each Active Page

Hi!

I apologize, I’m not that savvy with web designing, coding, CSS, etc.

So in this WordPress template we’re using, we have a navigation bar of links. We’ve managed to customize each menu link so they each have a different color on rollover.

When a visitor clicks on that link, we want that rollover color to stay on the active page. When on the home page and no links are hovered upon, all the links are to stay a neutral grey.

I know I’ve seen this in a couple other posts, but still have yet to resolve this and figure out how to make it work with the code we have already. So far we’ve managed to keep all the links grey and show a different color on rollover for each link. We’re not sure how to find a way to make the colors stay for the active pages. Any help is greatly appreciated! Thanks!

/* Home */
li.page-item-1433 a:hover{
color:#CACACA;
}

/* Entertainment */
li.page-item-2805 a:hover{
color:#FE2020;
}

/* Food & Travel */
li.page-item-6 a:hover{
color:#A2C1EE;
}

/* Lifestyle */
li.page-item-8 a:hover{
color:#e6da86;
}

/* Shop */
li.page-item-11 a:hover{
color:#e3b9e1;
}

/*Business */
li.page-item-9 a:hover{
color:#b1ec98;
}