[SOLVED] How to style sub-menu items separately
 

I would like to style the sub-menu items of my page menu bar separately (i.e. green background, white font, white line in between the items instead of the "green-on-white" styling of the parent items). How can I accomplish that? I've looked all around this forum and haven't found anything.

If you'd just let me know which selector to use, I think I can handle the rest. Thanks!

bump - can anyone help me?

Do a search for 'juggledad menu color cheat sheet' and see if it helps you

Thank you, but I knew that one. It does not list the selectors for sub-menu items in the page bar. Is there no way to style those separately?

if you mean that you have page 'A' which has subpages 'B' and 'C' and page 'D' which has subpages 'E' and 'F', and you want to style 'C' and 'D' different than 'E' and 'F', you can do that. You will haveto look at the source of your page and look at the menu. each PAGE will have a LI like this
this particular page has subpages (you can tell by the class 'rMenu-expand' and by the UL following this line in the code) and it has a unique class 'page-item-2' so you can target this pages subpages in your CSS Selectors. Each page would have it's own CSS Selector and rules so they can be different.

Thank you. Based on you example, I did not want to stype C, D different than E, F. But I still just could not find a way to do this. Using rMenu-expand did not work before, but it seems I should have used "!important" earlier. Thanks again.

Juggledad... any chance you can correct my syntax here...

Trying to style the sub-sub menus off of the main nav using your advice from above...

li#menu-item-2029 .rMenu-ver sub-menu {
width: 45em;
}

http://badgerrealty.com

menu item 2029 is the li ID from the drop-down off of the main nav. (towns).

I had successfully adjusted the nav drop-down and the sub nav drop-down, but then realized that my "agents" drop-down was too narrow. NOW, I want to style each of those pesky things individually. If I can get ONE to work, I'll be able to get the others as well...

jr

when you have an element with two (or more) classes and you want to target that element using both classes you use the format
if you seperate them by a space then you are looking an element with 'class2' that is a child of the element with the class 'class1'

i get the sense you should be teaching css classes!! :)

Thank you for the help and "teaching me to fish". always appreciated.