How do I automate what’s selected on my navbar?

I hope this question makes sense

So, I have different elements on the navigation menu selected depending on what page a visitor is on. For example, on the home page, the nav looks like this:

but on the Try it free page, it should look like this:

i’m using CSS to do the selected effect.

However, I want to have a common header.php file across all my pages; how do I automate what navigation element is selected based on what page the user is on with one common header, without having to manually change it for each page?


	<ul id="navigation">
						<li class="selected"><a href="#">Home</a></li>
						<li><a href="#">Try it Free</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="#">Demo Videos</a></li>
						<li><a href="#">Examples</a></li>
						<li><a href="#">Reviews</a></li>
						<li><a href="#">Support</a></li>
						<li><a href="#">Buy</a></li>

CSS code:

#navigation { display:inline; margin-top:12px; float:right;}
#navigation li { display:block; float:left; background:url(../images/navigation-li-bg.gif) no-repeat top left; height:23px; margin-right:5px;}
#navigation a { display:block; background:url(../images/navigation-a-bg.gif) top right no-repeat; height:23px; padding: 0 8px; text-decoration:none; color:#fff; font-size:13px; line-height:22px;}
#navigation a:hover { background-position:bottom right; color:#bbddff;}
*html #navigation a:hover { background-position:top right; color:#bbddff;}
#navigation li:hover { background-position:bottom left;}
#navigation .selected a { background-position:bottom right; color:#bbddff;}
#navigation .selected { background-position:bottom left;}
*html #navigation .selected a { background-position:top right; color:#bbddff;}
*html #navigation .selected { background-position:top left;}

help plz

Does that make sense?

whoops, got it. i can just do it with this

<?php if ($_SERVER['PHP_SELF']=="/index.php" || $_SERVER['PHP_SELF']==""){ echo " class="selected""; }?>