[SOLVED] Make color of dropdown/submenu i Menu1 different from parent

Picturesque · #1 Feb 25, 2013, 06:15 AM

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

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...

Code:

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?