I tried to create an image and then line up the links to the correct position but it is kinda hard to line up the links to their right positions.

Here is what my attempt looks like: http://hmgi.info/daovang/

Thanks.

This works:

/* --- Body */
body {
 background: #000000;
 text-align: center;
 color: #FFFFFF;
}

#body {
 text-align: left;
 margin: 0px auto;
 width: 750px;
}

/* --- Logo */
#logo {
 width: 300px;
 height: 50px;
 background: url(graphics/logo.png);
 margin: 0px 0px -10px -15px;
}

/* --- Menubar & Navigation*/
#menubar {
 background: url(graphics/menubar.png);
 width: 750px;
 height: 36px;
 margin: 5px 0px 0px px;
}

#navigation {
 margin-left: 20px
}

#navigation li{
 display: block;
 float: left;
 line-height: 35px;
}

#navigation li a{ 
 padding: 9px 25px 7px 25px;
}

/* --- Main */
#main {
 text-align: left;
 height: 500px;
 margin: 0px 0px 0px 0px;
}

<div id="menubar">

<div id="navigation">
        <li><a href="index.html" id="nav-home">Home</a></li>
        <li><a href="aboutus.html" id="nav-aboutus">About Us</a></li>
        <li><a href="services.html" id="nav-services">Services</a></li>
        <li><a href="contactus.html" id="nav-contactus">Conact Us</a></li>
</div>

</div>

Just so you know, if you have 0 as the value you don't have to put px. Just put 0.

set a width of your #navigation li around 100px and you need to hide you text link
by using this trick

#navigation li a { dispay:block; width:100px; height:50px; text-indent:-5000px cursorointer; overflow:hidden; }