Hi there!

I have a sub-menu that isn't displaying well. Can you take a peek at http://eolhealth.server308.com/ and let me know if there is a way to remove the menu background graphic from the drop-down menu area (I just want a bgcolor there)? And then for items 2 and beyond there is no background at all. The only menu with sub-pages is "Frankly Speaking."

Thank you!
-Kimberly

you need to reset the image and color for the submenu. try this (you will want to change the colors

div#menu1 ul.rMenu li ul {
background-image: none !important;
background-color: #ff0099 !important;
}

div#menu1 ul.rMenu li ul li {
background-image: none;
background-color: #ff0099 !important;
}

I used the above code to make my drop down items a light blue. When I highlight them everything works fine they turn dark blue as desired. However I have it set so the menu item for the current page displays as dark blue.

If you hover over the menu item of the current page the whole drop down menu opens in dark blue when the children should be light blue.

Ex. If you go here and hover the mouse over 'First Steps' everything is correct.

If you go to this page and hover the mouse over 'First Steps' the whole drop down menu opens in dark blue instead of light blue.

css can get very complicated and menu CSS espically so. The CSS for the menu has over 400 lines.

in your case when you click on 'First Steps' it gets the class of 'current_page_item'.

remember CSS has an order of precidence and if there are two CSS Selectors that could apply to the same code, the one that is more specific would apply AND since CSS cascades the rules apply to the child elements also.

so you need to reset the color for items that are subsequent when it has the class 'current_page_item'

Wow I'm impressed that you could understand my post and write an answer I could understand within 15 minutes. I am assuming that the css inserts in the theme options take priority over everything except css within a page so I added this at the end of the css inserts but it didn't work.

div#menu1 ul.rMenu li.current_page_item li ul{
background-image: none !important;
background-color: #c6d5ea!important;
}


div#menu1 ul.rMenu li.current_page_item li ul li{
background-image: none !important;
background-color: #c6d5ea!important;
}

try this

div#menu1 ul.rMenu li.current_page_item ul li a:link, 
div#menu1 ul.rMenu li.current_page_item ul li a:active, 
div#menu1 ul.rMenu li.current_page_item ul li a:hover, 
div#menu1 ul.rMenu li.current_page_item ul li a:visited, 
div#menu1 ul.rMenu li ul li a:hover {
    background-color: #c6d5ea;
    color: #000000;
}

That makes the drop down list of the current page light blue again, but it prevents you from selecting an item in it and making that item dark blue when you hover the mouse over it.

move the hover out to its own css

div#menu1 ul.rMenu li.current_page_item ul li a:link, 
div#menu1 ul.rMenu li.current_page_item ul li a:active, 
div#menu1 ul.rMenu li.current_page_item ul li a:visited, 
div#menu1 ul.rMenu li ul li a:hover {
    background-color: #c6d5ea;
    color: #777777;
}
div#menu1 ul.rMenu li.current_page_item ul li a:hover {
    background-color: #c6d5ea;
    color: #000000;
}

Almost. I changed the last color in your code to #5A85C1

The menu now works properly if you are on the First Steps Page

but the dropdown list won't change color on hover if you are on any other page. You are right menu css can get a lot more involved than I thought!