[Plugin: JQuery Mega Menu Widget] Different colours per menu list

Great success! I’ve figured out what and where to achieve separate colors for each menu list.

I gave the top level menu items a CSS class (in my case: menu-01, menu-02, etc). Then I added this CSS code to my stylesheet (either in the skin or master):


.menu-02 ul li.mega-hover a, .menu-02 ul li a:hover {background: #A41984 !important; color: #fff; text-shadow: none;}

.menu-02 a.dc-mega:hover {
background: #A41984 !important;
}

.menu-02 a.dc-mega:visited
{
background: #A41984 !important;
}

The first definition is for the drop-down menu items under the top-level list item. The second and third definitions are for the top-level menu item which activates the drop-down. At first I couldn’t figure out how to keep the hover state color active when I moved off the button and into the menu, but then I tried adding the pseudo class “:visited” to the tag, and *presto*, it works.

I hope this is useful for others!
Len

Ok, I got excited and spoke too soon… Forget the :visited pseudo class. It should have been :focus because if the top level page has not been visited, the previous hover state will override it.


.menu-01 ul li.mega-hover a, .menu-01 ul li a:hover, .menu-01 a.dc-mega:hover, .menu-01 a.dc-mega:focus {background: #055695 !important;}


Cheers
Len

Hi,

.menu-01 ul li.mega-hover

The .mega-hover class is added by jQuery when the user is over the menu link.

This class should remain if the user moves off the main link but into the sub-menu as the li tag is still wrapped around the sub menu. you should be able to use this to target any active styling