Sub Menu Colour Control in A Mega Menu

[RobDavies]

I thought I'd sorted out menu colours but was asked to do the following on the mega menu sub menu make link text white, and green when hovered over. This is for: http://nilc.co.uk/ I'm working with this block of CSS in our child theme nav .sub-menu li a{ color:#B6CB68; background-color:#313B3B; opacity: 1; display: block; font-size:12px; //border-bottom:1px dotted rgba(255,255,255,0.3); padding:5px; }   nav .sub-menu li a:hover{ color:#B6CB68; background-color:#000; opacity: 0.8; display: block; font-size:12px; //border-bottom:1px dotted rgba(255,255,255,0.3); padding:5px; }   nav .sub-menu li a: { color:#fff; background-color:#ffffff; opacity: 1; display: block; font-size:12px; //border-bottom:1px dotted rgba(255,255,255,0.3); padding:5px; } Whilst it goes part of the way it does not seem to work on text colour - Is there something else influencing sub menu text?  

[RobDavies]

Just adding this to activate email notifications

[H.K. Latiyan]

When you try to override the sub menu text color then it takes the color from menu. So to override only sub menu color you have to give more specific css like:

nav .menu .sub-menu li a {
color: #000;
}

[RobDavies]

That makes a lot of sense.   I've added to the base of our child css nav .menu .sub-menu li a { color: #fff; } nav .menu .sub-menu li a:hover { color: #3E4B3B; } Which in theory should give us what we want however there's no actual change. I'm wondering if there is anything obvious that I am missing?  

[H.K. Latiyan]

You are using mega menus. Mega menus uses widgets to show sub menu. So use this custom css:

nav .menu li .menu-sidebar .widget ul li a {
color: #fff;
}

nav .menu li .menu-sidebar .widget ul li a:hover {
color: #3E4B3B;
}

[tamdao]

Dear Mr/Mrs   Cloud you help me change hover text color and show time on megemenu. I add nav .menu li .menu-sidebar .widget ul li a { color: #fff; }   nav .menu li .menu-sidebar .widget ul li a:hover { color: #3E4B3B; } into CSS but not effect. My site: http://rc3.ttu.edu.vn    

[Skywalker [ ex VibeThemes]]

  Add this CSS instead. nav .menu li .menu-sidebar .widget ul li a { color: #fff !important; } nav .menu li .menu-sidebar .widget ul li a:hover { color: #3E4B3B !important; }   PS: Create new topic for your own issues.  

[Author]

Posts