mslee,
I believe that the following two examples address your issue. And I am guessing that the reason the pages you were referred to didn’t help is that you do not quite appreciate specificity (thus, I have included TWO examples).
Note that classnames were added to all of the list items AND the <body> tag has been given an id.
The first example uses your code and demonstrates how to override the link coloring on each page with the !important property. However, it is usually unnecessary.
The second example minimizes the specificity preceeding the anchor code; therefore, the additional “!important” property is unnecessary.
If greater specificity is needed within the lists (as shown in the first example), then it should also be added in the code at the top of the page (#nav ul li a…), OR add the !important property to override the list specificity (as in the first example).
FYI:
“#ul li a” is very specific compared to “a”; therefore, more “effort” to override.
A note about id’s:
An id is also 255 times more specific than a class. It’s a good idea to minimize the use of id’s to those items that absolutely must be unique for some reason. It is probable that the ul could be identified by a classname quite successfully.
Hope this helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?936412-How-do-i-make-an-active-link-stay-the-same-color-when-the-page-has-been-visited
Thread: How do i make an active link stay the same color when the page has been visited
2012.12.12 05:15
mslee
-->
<head>
<title>Matching Pairs Menu Technique</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
/* "Matching Pairs" menu css */
#index .index a,
#construction .construction a,
#it .it a,
#web .web a,
#cf .cf a,
#smf .smf a,
#phonebook .phonebook a {
background-color:#003 !important; /* To override specificity on the page, !important has been added. */
color:#fff !important;
text-decoration:none;
}
/* Everything Else */
#nav ul {
list-style-type:none;
margin:0;
padding:0;
}
#nav ul li {
margin:0 0 10px;
}
#nav ul li a {
border:2px solid #000033;
border-left:none;
display:block;
font-weight:bold;
text-shadow:none;
-moz-text-shadow:none;
-webkit-text-shadow:none;
text-transform:uppercase;
padding:2px 5px;
}
#nav ul li a:link {
background-color:#99ccff;
color:#000033;
width:200px;
border-radius:0 1em 1em 0;
}
#nav ul li a:visited {
color:#000033;
background-color:#99ccff;
}
#nav ul li a:hover {
position:relative;
color:#000033;
background-color:#99ccff;
width:200px;
border-radius:0 1em 1em 0;
}
#nav ul li a:active {
color:#fff;
background-color:#000033;
text-decoration:none;
}
</style>
</head>
<body id="construction">
<div id="nav">
<br></br>
<ul>
<li class="index"><h3><a href="index.html">Home</a></h3></li>
<li class="construction"><h3><a href="construction.html">Construction</a></h3></li>
<li class="it"><h3><a href="it.html">I T Dept</a></h3></li>
<li class="web"><h3><a href="web.html">Websites</a></h3></li>
<li class="cf"><h3><a href="cf.html">Company Forms</a></h3></li>
<li class="smf"><h3><a href="smf.html">Site Management Forms</a></h3></li>
<li class="phonebook"><h3><a href="phonebook.html">Phone Book</a></h3></li>
</ul>
</div><!-- nav ends here -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?936412-How-do-i-make-an-active-link-stay-the-same-color-when-the-page-has-been-visited
Thread: How do i make an active link stay the same color when the page has been visited
2012.12.12 05:15
mslee
-->
<head>
<title>Matching Pairs Menu Technique</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
/* "Matching Pairs" menu css */
#index .index a,
#construction .construction a,
#it .it a,
#web .web a,
#cf .cf a,
#smf .smf a,
#phonebook .phonebook a {
background-color:#003;
color:#fff;
text-decoration:none;
}
/* Everything Else */
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
margin:0 0 10px;
}
a {
border:2px solid #000033;
border-left:none;
display:block;
font-weight:bold;
text-shadow:none;
-moz-text-shadow:none;
-webkit-text-shadow:none;
text-transform:uppercase;
padding:2px 5px;
}
a:link {
background-color:#99ccff;
color:#000033;
width:200px;
border-radius:0 1em 1em 0;
}
a:visited {
color:#000033;
background-color:#99ccff;
}
a:hover {
position:relative;
color:#000033;
background-color:#99ccff;
width:200px;
border-radius:0 1em 1em 0;
}
a:active {
color:#fff;
background-color:#000033;
text-decoration:none;
}
</style>
</head>
<body id="construction">
<div id="nav">
<br></br>
<ul>
<li class="index"><h3><a href="index.html">Home</a></h3></li>
<li class="construction"><h3><a href="construction.html">Construction</a></h3></li>
<li class="it"><h3><a href="it.html">I T Dept</a></h3></li>
<li class="web"><h3><a href="web.html">Websites</a></h3></li>
<li class="cf"><h3><a href="cf.html">Company Forms</a></h3></li>
<li class="smf"><h3><a href="smf.html">Site Management Forms</a></h3></li>
<li class="phonebook"><h3><a href="phonebook.html">Phone Book</a></h3></li>
</ul>
</div><!-- nav ends here -->
</body>
</html>