Menu Drop Down Background Colors

Hello,

I'm seeking direction as to the best method to modify the background color of drop down sub-menus. By chance, is this the intention of "additional class" within "Menu Params (GavickPro)"? My rather simple goal is to have the drop down sub-menu background color follow the color scheme of template color VI that I've chosen in the Joomla Template Manager.

Currently my Level 2-4 background colors are each "lavender", while I'd like Level 2 to remain "lavender", Level 3 to be "black" and Level 4 to be "light green" (again, simply follow the template color style).

Any help is greatly appreciated!

Craig

Could you please post an url to your site?

Site can be found at http://connected-planet.com/

User: admin
PW: admin

Thank you!

On your site there is a colour style switcher still active. It uses cookie to store last used colour scheme.
When I have visited your site the colour scheme was set to Style 6 and as I understand it is correct. Menu backgrounds was also within this colour scheme.
Perhaps you have a cookie with different colour scheme set from the frontend and that is the problem source? Please try to use your browser in private/incognito mode.

I sense that you're confirming that by design that my each of my nested sub-level menu backgrounds should by default be displaying (per level) a unique color within the template color scheme (VI).

I've turned OFF the color style switcher, I've cleared cookies, browsed privately, and I don't see any difference concerning the background color of the sub-menu groups and levels.

Ok, so I don't quite get it - could you please show me a sample on our demo server where this different background colour for each of menu levels is applied?

Ok, let's start anew.

I'm NOT disputing whether the template is functioning properly. Actually, I think it is working fine.

On my home page, across the top-right, you see my HOME, SERVICES, SOLUTIONS, etc links. I consider these links to be level #1. When, for example, you hover over SERVICES the level #2 sub-menu drop-down displays with the "lavender" background, which is desired, and of course this "lavender" color is part of template color scheme (VI). While hovering over SERVICES, if you then hover over "Computing in the Cloud", the level #3 sub-menu drop down displays with the same "lavender" background. It is at this point, my desire to have the level #3 background be "black" (the 2nd color of color scheme VI), and that if you continue by hovering over "Software as a Service", the level #4 drop-down background be "green" (the 3rd color of color scheme VI).

Of course, it's also a goal to achieve this as cleanly as possibly, and I'm asking whether this multi-level, multi-color goal of mine was any part of the template design consideration, and whether my goal could be achieve with no changes to the CSS by using either an "override" in Joomla backend, Template Manager or in a menu module.

Hope my question and intentions are clearer now. Thanks!

I think the menu was not considered to act as you describe but is not that hard to make it that way .
Please edit: /templates/gk_cloudhost/css/override.css and add at its end:

Code: Select all

#gkMainMenu .gkMenu > ul li div.childcontent div.childcontent {background: #000;}
#gkMainMenu .gkMenu > ul li div.childcontent div.childcontent div.childcontent {background: #adc75b;}
ul.level3 small {color: #fff !important;}


Remember to enable "CSS override" in template settings - advanced section.

OK, that's understandable. Thanks for the CSS too!

Did the css work for you correctly?