One of my friends who just started designing his own website came up with a Header and the navigation bar as the initiatives. As a habit of going through the coding first I went through his coding for the navigation bar. I actually started to laugh my ass out. He used  &nbsp to separate the spaces between the links. So I thought of writing this tutorial because just like him there will be plenty of people around who will be not knowing a proper way of doing a navigation bar.
Basically this navigation bar will be a un ordered list (<ul></ul>)

Demo

HTML

<ul id="top_navigation">
  <li><a href=”#”>Home</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Services</a></li>
  <li><a href=”#”>Portfolio</a></li>
  <li><a href=”#”>Contact</a></li>
</ul>

This is the basic html you need to do. Pretty simple isn’t it? Hold on that’s not all. This will basically give you a display like :

• Home
• About
• Services
• Portfolio
• Contact

If this was the result don’t get fed up, So far so good.  Next what we will have to do is work on the CSS! Do some styling to the list.

CSS

ul#top_navigation{

        list-style:none;

        margin:0; padding:0;

        width:900px;

        position:relative;

        background-color:#000000;

        }

        ul#top_navigation li{

        display:inline;

        margin:0; padding:10px 0;

        }

        ul#top_navigation li a{

        text-decoration:none;

        color:#FFFFFF;

        font-family:Verdana, Arial, Helvetica, sans-serif;

        font-size:12px;

        padding:10px 15px 10px 15px;

        background-color:#0099FF;

        }

        ul#top_navigation li a:hover{

        background-color:#CCCCCC;

        }