Please, am trying out my little knowledge on css. Please, how do I make the active links to remain the same color with the hover? I don't seem to get it here. Am almost giving up on this but am eager to learn more. Please help.


.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 2px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 0px; /*offset of tabs relative to browser left edge*/
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 5px 15px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: #000040;
background: #ccc; /*background of tabs (default state)*/
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
color: #fff;
background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

Look at this

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
color: #fff;
background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

remove "color: #fff;" to remove the hover color

If you want to remove the whole hover behavior, remove the whole of this

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
color: #fff;
background: #000040; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}


hope this works

Thanks dual core but am actually talking about making keeping the selected link highlighted as an active page. The hover effect is ok but now, if someone clicks on the page how do they know they are actually on the page since the button (link) isn't highlighted?

Ok, in your html, have you set the desired <li> to be of the class .selected?

lets start from there first.

Dual core. Thank you sooo much. (I felt stupid that its just that simple input )
So, isn't there a way I could input the class universally in my html other that going through the <li> one after the other?
Abeg thank you again, this thing na common sense oh, (that is not common sha)

You're welcome.

I am assuming you are working on a set of navigation buttons and for each page a different button will be selected. What i mean is, for the About page the "About" li becomes the one with the selected class, for the Contact page the Contact li becomes the one with the selected class. So its not something you can (simply) set universally. For each page you just set the desired li to be of the class selected and you'll be just fine.

Well a "simple input" held you down. I've been held down by worse things. I've been held down severally by delimiters. We never stop learning that's the beauty of what we do

I have my ACTIVE LINKS working NOW!
Yeah, I guess knowledge comes with perseverance (To think I almost gave up on this and wouldn't have known this is horrible )
I may be hitting back wid mo of my wahalas" and I hope you're gonna be here for me. You never know what a single act of kindness can do to some souls. Really appreciate but hang on wid me Oh, am still toddler on this