Please help. For some reason the a:link visited is not working
I need the background of the link to be black when visited/active and instead it reverts back to original colour - this is annoying because u cant tell what page u are on unless the link is black
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Intranet Home Page"/>
<meta name="author" content="Leanne Taylor" />
<meta name="robots" content="index, follow" />
<link href="CSS/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/links.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body background="" id="coshh">
<br></br>
<div id="homewrapper">
<br></br>
<img src="logo/newlogo.jpg" alt="Logo" title="Logo" width="200" height="160" class="floatImageLeft" />
<div id="nav">
<br></br>
<ul>
<li class="index"><h3><a href="index.html">Home</a></h3></li>
<li class="accident"><h3><a href="accident.html">Accident</a></h3></li>
<li class="coshh"><h3><a href="coshh.html">CoSHH</a></h3></li>
<li class="emergency"><h3><a href="emergency.html">Emergency</a></h3></li>
<li class="fire"><h3><a href="fire.html">Fire Prevention</a></h3></li>
<li class="method"><h3><a href="method.html">Method Statements</a></h3></li>
<li class="riskcon"><h3><a href="riskcon.html">Risk Control Arrangements</a></h3></li>
<li class="permit"><h3><a href="permit.html">Permit To Work</a></h3></li>
<li class="policies"><h3><a href="policies.html">Policies & Procedures</a></h3></li>
<li class="riskass"><h3><a href="riskass.html">Risk Assessment</a></h3></li>
<li class="sitein"><h3><a href="sitein.html">Site Inspection</a></h3></li>
<li class="sitepack"><h3><a href="sitepack.html">Site Pack</a></h3></li>
<li class="swine"><h3><a href="swine.html">Swine Flu</a></h3></li>
<li class="temp"><h3><a href="temp.html" >Temporary Works</a></h3></li>
<li class="train"><h3><a href="train.html">Training</a></h3></li>
</ul>
</div><!-- nav ends here -->
<div id="content">
</div>
<!-- content ends here -->
<div id="footer">
</div> <!-- footer ends here -->
</div>
<!-- wrapper ends here -->
</body>
</html>
</html>
Here is the CSS
#accident .accident a,
#coshh .coshh a,
#emergency .emergency a,
#fire .fire a,
#method .method a,
#riskcon .riskcon a,
#permit .permit a,
#policies .policies a,
#riskass .riskass a,
#sitein .sitein a,
#sitepack .sitepack a,
#swine .swine a,
#temp .temp a,
#train .train a;{
background-color:#000 !important; /* To override specificity on the page, !important has been added. */
color:#fff !important;
ext-decoration:none;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav ul li {
margin: 0 0 10px;
}
#nav ul li a {
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: #d6e3ec;
border: 1px solid #000;
border-left: none;
color: #000;
width: 200px;
border-radius: 0 1em 1em 0;
}
#nav ul li a:visited {
color: #000;
background-color: #d6e3ec;
}
#nav ul li a:hover{
position: relative;
color:#fff;
background-color:#000;
width: 200px;
border-radius: 0 1em 1em 0;
}
#nav ul li a:active{
color:#fff;
background-color:#000;
text-decoration: none;
}
ul li a{
font-family:"Times New Roman", Times, serif;
font-size: 16px;
}