[SOLVED] menu- different color for each text category

Hello everyone,

I want every category menu above will be different colors,
I want one color for the "home" text, and another for "about" etc.
Even when hover on category the color change and when pressed point remains.

My css menu codes:
ul.rMenu {
padding:0 !important;
margin:0 !important;
list-style:none !important;
margin: 23px 18px 0 0px !important;

}
ul.rMenu li {
margin:15px 17px 13px 37px !important;
padding: 0px 0px 0px 0px !important;
}
ul.rMenu li a {
margin:0px !important;
padding: 0px 0px !important;
color:#626262 !important;
font:bold 14px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}
ul.rMenu li.current_page_item a {
color: #000000 !important;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}

div#menu1 ul.rMenu li {
background-color: transparent;
}
div#menu1 ul.rMenu {
background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#000000 !important;
border-right: 0px solid #aaaaaa;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}
#menu1 {
width: 902px !important;
}

div#menu1 {
order-bottom: 0px solid #461D7C;
background-image: URL('/wp-content/themes/atahualpa/images/menu1-1.png') !important;

}

I tried to add my design code:
li.page-item-24 {
text-color: #dddddd !important;
}

li.page-item-24 a:hover {
text-color: #dddddd !important;
}

li.page-item-24.current_page a {
text-color: #dddddd !important;
}
But without success, why?