Problem with the drop-down menu
 

Hello,

I have a problem with the drop-down menu, I want different hover background to drop-down menu, How can I do this? What code should I add to my code?
And how can I increase the drop-down menu a bit?
The drop-down menu does not look good at all :( , how can I change it?

My site: http://hagitakavia.com.preview9.loga...il/?page_id=26
My css code:
ul.rMenu {
padding: 16px 0px 0px 0px !important;
margin:0px 0px 0 0px !important;
list-style:none !important;

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

}
ul.rMenu li a {
margin:0px !important;
padding: 2px 16px !important;
color:#f4f4f4 !important;
font:normal 15px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
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:#d03030 !important;
border-right: 0px solid #aaaaaa;
background-image: URL(/wp-content/themes/atahualpa/images/menu2.jpg) !important;

}
ul.rMenu li.current_page_item a {
color: #f4f4f4 !important;
background-image: URL(/wp-content/themes/atahualpa/images/menu1.jpg) !important;
}

#menu1 {
width: 999px !important;
}

.sub-menu {
position:absolute;
top: 25px !important;
}
.sub-menu li {
background: #000000 !important;
padding: 0px !important;
margin: 0px !important;
width: 100% !important;
text-align: right;

}

Thank you again.

start by going to this site and reading about psuedo classes

I asked for help, maybe I'm missing something in my code? This link does not help me.

I looked at your code for a bit and it looks like a significant part of your issue is the absolute positioning on some of the elements. You might want to make a copy of all the CSS you have implemented, especially that which affects the menu, as a backup, delete it from the theme options and start over by adding it back in a bit at a time.