Add Background Color to Main Menu Tabs, On Hover & Active Tab

[Jen]

How to add a little zing to your main menu tabs. Add a different background color, when someone hovers a menu tab. Ning enables us to set this value for sub-tabs, under Manage/Tab Manager.

• Decide what background color you will use for the active menu option & hovered menu option. This code only uses 1 color for both.
• Add the following code to your CSS, "Manage/Appearance/Advanced CSS"
• Change the color:#16BFFF to your chosen color.

#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF;
background-repeat:repeat-x;
}

If you want to override the sub-menu tab settings, add !important - - using code below.

#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF!important;
background-repeat:repeat-x!important;
}
This code should make the background color:#16BFFF for:
1. Your active Menu Tab
2. Hovered Tabs

Hopefully, it won't interfere with any other CSS your using. You can also use an image for the background. Remind me to add that later.
~Jen~

[Brian Floe]

Hi Jen - thanks

 

Actually I also want to change one of my navigation tabs text colors to red but this is not working:

#xg_tab_xn127 {color:white;}

 

But by "subtabs" I mean the drop down menu items, not the various navigation tabs that you listed.

 

Let me try and explain:

For the horizontal navigation tabs I'm using a gradient background color similar to what Apple is using just in different colors.

But for the drop down menu I'm using a semi-transparent white background color and just a totally different styling.

My problem is that the drop down menu items (subtabs) somehow get the same gradient colored background BEHIND the white transparent color, which then means that it's not so transparent suddenly :)

 

Does that make sense?

The problem is that the styling applied to #xg_navigation ul apparently scoops down into my subtabs / drop down menu area. So I was wondering how I can specify "only horizontal tabs" and leave out the subtabs?

[ROBBCORP.COM]

You are way too AWESOME. Way to AWESOME Jen.

[Speed Racer]

is there a way to make just the font change color on hover and after being selected? in other words, i have a black background with a light blue font. when i hover over it, i just want the WORD to change to orange, and then when i click it, to stay orange.......can that be done?

[Jen]

Yeah, that can be done. Just change the parameter background-color to color. Change to your colors.

 

/* Regular State */

#xg_navigation ul li a {
color:#003366;
}

 

/* Selected State */

#xg_navigation ul li.this a {
color:#16BFFF!important;
}

 

/* Hovered State */

#xg_navigation ul li a:hover {
color:#FFF000;
}

[Speed Racer]

w00t! thank you Jen!

 

 

[Jen]

LOL, I love Carlton!