Solved: CSS list menu - show active page.

Hi,
How can I modify the CSS so that when I am on a current page, eg page1.htm it shows a different colour (green) and text bold.

Thanks in advance for your feedback.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#navcontainer{
	float: left;
	height: 448px;
	background-color: #000000;
	width: 230px;
}
 
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
 
#navcontainer a
{
	display: block;
	padding: 3px;
	width: 230px;
	background-color: #000000;
	border-bottom: 1px solid #eee;
	text-decoration: none;
}
 
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
 
#navcontainer a:hover
{
	background-color: #990000;
	color: #fff;
}
</style>
</head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="page1.htm" id="active">Page 1</a></li>
<li><a href="page2.htm">Page 2</a></li>
<li><a href="page3.htm">Page 3</a></li>
<li><a href="page4.htm">Page 4</a></li>
</ul>
</div>
</body>
</html>

Open in new window