Horizontal Navigation

Horizontal navigation is huge on the internet and the easiest way to do it is with a little bit of CSS. The first step is to make your navigation list:

<div id="navigation">
<ul id="navlist">
<li><a title="Home" href="step-1.php">Home</a></li>
<li><a title="Link1" href="step-1.php?title=link1">Link1</a></li>
<li><a title="Link2" href="step-1.php?title=link2">Link2</a></li>
<li><a title="Link3" href="step-1.php?title=link3">Link3</a></li>
</ul>
</div>

Example (step1)

/*       Navigation      */

#navigation {
height: 20px;
font-size: 12px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
width: 500px;
float: left;
background-color: #333333;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;}#navlist {
margin: 0;
padding: 0;
clear: left;}

#navlist li {
margin: 0;
padding: 0;
text-transform: lowercase;
display: inline;}

#navlist a {
color: #FFFFFF;
font-weight: normal;
height: 20px;
padding-top: 5px;
padding-right: 16px;
padding-bottom: 5px;
padding-left: 16px;}

#navlist a:hover {
color: #FFFFFF;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
border-bottom-width: 2px;
background-color: #78A515;}

Second we want to make the code display the list horazontaly so we use a big of CSS for this:

Example (step2)

If you want to have a current page tab you would use something like a case statement for navigation found here to navigate a site. php would then use the values from your navigation string and test to see if they are equal to the navigation tab.
Here is the updated code for current tabs:
The PHP:

<div id="navigation">
<ul id="navlist">
<li <?php if ($title=="") echo " class=\"currentpage\""; ?>>
		<a href="step-3.php" title="Home">Home</a>
	</li>
<li <?php if ($title=="link1") echo " class=\"currentpage\""; ?>>
		<a href="step-3.php?title=link1" title="Link1">Link1</a>
	</li>
<li <?php if ($title=="link2") echo " class=\"currentpage\""; ?>>
		<a href="step-3.php?title=link2" title="Link2">Link2</a>
	</li>
<li <?php if ($title=="link3") echo " class=\"currentpage\""; ?>>
		<a href="step-3.php?title=link3" title="Link3">Link3</a>
	</li>
</ul>
</div>

The CSS:

/*   Currentpage   */

#navlist .currentpage a {
color: #333333;
text-decoration: none;
background-color: #FFFFFF;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;}

#navlist .currentpage a:hover {
color: #3E3E3E;
text-decoration: none;
background-color: #FFFFFF;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;}

Here is an example of the finished product in action (step3)