problem with the top drop-down menu hover background color
 

Hello,

I have a problem with the top drop-down menu, I want the hover and when you click on the categories they will become different dark background color, how can I do this? I think I have some problem in my codes that not give me the option to change.
Seems to me they have a whole mix that not works together.
Here are the codes:

My Site
ul.rMenu {
padding: 0px !important;
margin: 0px !important;
list-style:none !important;

}
ul.rMenu li {
margin:2px 20px 0px 25px !important;
padding: 0px 0px 0px 0px !important;


}
ul.rMenu li a {
margin: 0px !important;
padding: 0px 0px !important;
color:#F1F0E8 !important;
font:normal 16px arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #cccccc;
border-left: 0px solid #222222;

}

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:#ffffff !important;
border-right: 0px solid #aaaaaa;
background: url(/wp-content/themes/atahualpa/images/menu2.png) !important;

}
ul.rMenu li.current_page_item a {
color: #ffffff !important;
background: url(/wp-content/themes/atahualpa/images/menu2.png) !important;
}

#menu1 {
width: 999px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;

}



ul.rMenu-ver {
margin: 0 !important;
list-style: none !important;
margin-right: -40px !important;
padding-top: 14px !important;
}


ul.rMenu-ver li {
margin: 0 !important;
padding: 0 !important;
border-top: solid 0px #f4f4f4;
padding-left: 10px !important;
padding-top: 4px !important;
padding-bottom: 2px !important;
border-bottom: solid 1px #F1F0E8;
border-right: solid 0px #F1F0E8;
border-left: solid 0px #F1F0E8;
}
ul.rMenu-ver li a {
margin: 0 !important;
color: #F1F0E8 !important;
text-align: left;
height: 22px !important;
font:normal 12px arial !important;
border-top: solid 0px #f4f4f4;
}

li.rMenu-expand li {
width: 253px !important;
height: 22px !important;
margin-right: -15px !important;
margin-top: 0px !important;
border-top: solid 0px #f4f4f4;
background: url(/wp-content/themes/atahualpa/images/menu2.png) !important;
}

.rMenu-expand page_item li {
width: 253px !important;
height: 22px !important;
margin-right: -15px !important;
padding-bottom: 0px !important;
border-top: solid 0px #f4f4f4;
background: url(/wp-content/themes/atahualpa/images/menu2.png) !important;
}
div#menu1 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
}

ul.rMenu ul {
background-color:transparent;

I would appreciate help

there is a thread in the 'ATAHUALPA-FAQ' forum/MENUs called the color Cheat sheet that might give you some guidence.

I do not have time to search, I'll pay for this work, just say how much it will cost, I need it urgently.