Back to CSS Tips
Preview: what the working site looks like.

Here is the bit of CSS that makes the menu item indicate what page you are on. The body id on each page matches the anchor's id in the menu. See another example of this method here.

			body#homenav li#home a, 
			body#servicesnav li#services a,
			body#portfolionav li#portfolio a,
			body#contactnav li#contact a {
				color: #fff;
			}
			
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>    
    <div id="container">
        <ul id="menu">
            <li id="home"><a href="index.html">HOME <span>About us</span></a></li>
            <li id="services"><a href="services.html">SERVICES <span>What we can do</span></a></li>
            <li id="portfolio"><a href="portfolio.html">PORTFOLIO <span>What we have done</span></a></li>
            <li id="contact"><a href="contact.html">CONTACT <span>Reach out</span></a></li>
        </ul> 
    <!--container--></div>  
</body>
</html>
        
The CSS
#container {
	width: 800px;
	margin: 30px auto 900px;
	padding: 50px 0 300px;
	background: #999;
}
ul#menu {
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style-type: none;
	background: #000;
}
	ul#menu li {
		float: left; 
		padding: 0 0 0 20px;
		text-align: left;
		background: #000;
	}
			#home {width: 135px;}
			#services {width: 180px;}
			#portfolio {width: 210px;}
			#contact {width: 190px;}
	ul#menu li a {
		float: left;   
		color: #09c;
		text-decoration: none;
		font-size: 2em;
		outline: none;
	}
		ul#menu li a span {
		float: left; 
		color: #fff;
		font-size: 0.5em;
	}
	ul#menu li a:hover {color: #fff;}
	
	
/*************breadcrumb**************/
		body#homenav li#home a, 
		body#servicesnav li#services a,
		body#portfolionav li#portfolio a,
		body#contactnav li#contact a {
			color: #fff;
		}
/**************************************/