Wordpress Themes - WP Forum at BFA - [SOLVED] Make color of dropdown/submenu i Menu1 different from parent

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - [SOLVED] Make color of dropdown/submenu i Menu1 different from parent (http://forum.bytesforall.com/showthread.php?t=19725)

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

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? :)

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.

Code:

/* 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?

This works on all without page ids
/*dropdown menu color*/
div#menu1 ul#rmenu2 li ul a {
background:#dfdfdf !important;
border: #dfdfdf;
}

this is a light gray

...and it no longer works :(

For the border you need width and style along with color (EG border: 1px solid #dfdfdf)

@sharonj - so what changed? WP version Atahualpa? what is the url?

That coding worked just fine in 2010, but it does not appear to work now, even if I do add border values as Larry has suggested.

Since that time there have been at least 2 Wordpress updates and an Atahualpa update. I am using the latest:
Wordpress 3.6.1
Ata 3.7.12

http://www.csrbc.org

Could this have happened about the time you added a 'body{...' CSS statement to the CSS Inserts and forgot to add the closing '}'?

<gnashing teeth in agony of embarrassment> Um...maybe....maybe not...um....Just leaving now to jump off local bridge.... won't die, as it is only 5 feet from the water, but it will teach me a lesson.

Thanks for that!

All works perfectly now. :o