Hi! I'm working with a page, and I have successfully styled the Page Menu to my liking with the following code.

#menu1 {
	position: absolute !important;
	margin-top: 470px !important; 
	z-index: 3000;
}

ul.rMenu {
margin-left: 174px;
width: 680px !important;
background: none !important;
}

ul.rMenu li {
    background: none !important;
    margin-right: 15px;
    margin-bottom: 1px;
    border-top: 3px #f7931e solid;
    font-weight: 200 !important;
    font-family: Skranji !important;
}

ul.rMenu li:hover {
    border-top: 3px #f0f0f0 solid;
    background: none !important;
}

/* REMOVE DROP DOWN ARROW */

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	margin-right:0px;
	}

I want the dropdown menu items to have different background-color, and I can do this with the following code - however it is page ID specific which takes too much time and effort if there is a code for it to make it work on all the sub pages...

div#menu1 li.page-item-15 a:link,
div#menu1 li.page-item-15 a:visited,
div#menu1 li.page-item-15 a:active
{
background:#f7931e !important;
color:#ffffff !important;
min-height:30px;
font-size: 16px !important;
font-weight: 200 !important;
border-top: 0px !important;
margin-bottom: 5px !important;
}
div#menu1 li.page-item-15 a:hover {
background:#eeeeee !important;
color:#f7931e !important;
}

If you check out my page: http://ursamajors.com/w you can see how this has turned out. You can see that the page with ID 15 is the way I want it, however it still has a white background behind the orange one, which is annoying... How can I remove it? I have helplessly searched for a way to do it, however unsuccessfully.

Anyone?

Changed the code to this, but I still have to enter each page ID, and it won't be easy for my friendto add new pages (she is taking over the page after I have "designed" it) as she has no knowledge in CSS.

And still the ul background is white, regardless of the chosen li background-image... annoying.

/* MENU ITEMS */


	/* OUR MALES */
		div#menu1 li.page-item-15 a:link,
		div#menu1 li.page-item-15 a:visited,
		div#menu1 li.page-item-15 a:active,
	/* OUR FEMALES */
		div#menu1 li.page-item-17 a:link,
		div#menu1 li.page-item-17 a:visited,
		div#menu1 li.page-item-17 a:active,
	/* MOVED DOGS */
		div#menu1 li.page-item-29 a:link,
		div#menu1 li.page-item-29 a:visited,
		div#menu1 li.page-item-29 a:active,
	/* DOGS FORM US */
		div#menu1 li.page-item-31 a:link,
		div#menu1 li.page-item-31 a:visited,
		div#menu1 li.page-item-31 a:active,
	/* ANGELS */
		div#menu1 li.page-item-32 a:link,
		div#menu1 li.page-item-32 a:visited,
		div#menu1 li.page-item-32 a:active 	 
   		
		{
			
    			background: url(wp-content/themes/atahualpa/images/noise_light.png) repeat top left !important;
			color: #eeeeee !important;
			font-weight: 200 !important;
			font-family: "Helvetica Neue", arial, verdana, sans-serif !important;
			padding: 10px !important;	
			font-size: 18px !important;			

		}

		div#menu1 li.page-item-15 a:hover,
		div#menu1 li.page-item-17 a:hover,
		div#menu1 li.page-item-29 a:hover,
		div#menu1 li.page-item-31 a:hover,
		div#menu1 li.page-item-32 a:hover, 
		
		{
			background: #eeeeee !important;
			color: #f7931e !important;
		}

EDIT: And also, the hover color doesn't work.

did you look to see if there is a class that is common to all the links?