vertical menu with multiple background colors - SOLVED

We are trying to implement a vertical menu that would have a different background color for each main level and their corresponding second level items. We would like to use the default navigation template for this if possible. For the navigation module we are stopping at the second level of pages. This menu would look similar to the one on this site: http://accessibility.umn.edu, but the background color for Home, Documents, Presentation etc. and their corresponding second level pages would be different. For example, Documents, Word, PDF and Excel would all appear on blue background.

I cannot think of how this could be accomplished, since the background color area would need to change dynamically based on the length of the second level menu. Any thoughts on how to do this?

You can give each page a CSS class (in Site Structure settings). That CSS class will also be assigned it's corresponding item in the navigation menu.

That should be all you need -- just apply a CSS background color to each class. Since the 2nd level items are inside the main ones, they'll get the background too. And of course like all elements the background will shrink or expand to match the length of the 2nd level menu.

Thanks Medianomaly, I will give your suggestion a try.

By looking at the page settings in Site Structure, the comment below the CSS class field says: "The classes will be used in navigation menu and the body tag" In my case I would like the background color to show up only in the navigation menu. Is there a way to override the body tag with the default page color?

Never mind. I tried it and the color was applied only to the menu.