ENFOLD: Main Menu – change to different color bars

Hi!

I’d like to change the colors of the font and bar of the Main Menu in 4 different colors (cyan – magenta – yellow – black).

First I tried to add classes to the menu items, but it didn’t worked.
Now I added to quick CSS the following code:

li#menu-item-18 a .avia-menu-text,
li#menu-item-19 a .avia-menu-text,
li#menu-item-20 a .avia-menu-text,
li#menu-item-21 a .avia-menu-text,
li#menu-item-22 a .avia-menu-text,
li#menu-item-23 a .avia-menu-text {
    border-style: none!important;
}

/* cyan */
li#menu-item-18 a:hover .avia-menu-text,
li#menu-item-22 a:hover .avia-menu-text  {
    color: #009fe3!important;
    border-color: #009fe3;
    border-bottom-style: solid!important;
}

/* magenta */
li#menu-item-19 a:hover .avia-menu-text,
li#menu-item-23 a:hover .avia-menu-text {
    color: #e6007e!important;
    border-color: #e6007e;
    border-bottom-style: solid!important;
}

/* yellow */
li#menu-item-20 a:hover .avia-menu-text {
    color: #ffed00!important;
    border-color: #ffed00;
    border-bottom-style: solid!important;
}

/* black */
li#menu-item-21 a:hover .avia-menu-text {
    color: #cccccc!important;
    border-color: #cccccc;
   border-bottom-style: solid!important;
}

I’m not that happy about the result.
The look of the active state should be the same like the hover-state, but it doesn’t work… :(
And I’m not sure if this is the best way to come to a solution by “Menu Style – Button Style (Bordered)”…

I’m thankful for any help!
I was looking for a similar post with a solution, but I couldn’t find any…