Menu Bar: Do It Yourself.

I just created my own menu bar. As you can see, there is a menu above (below my adsense banner) and it look nice. At first , I can't see any unique looking at this menu bar, but after I've got an email from one of my readers (regarding the code on how to do it)... I've made a decision to put it here.

Here it is:

Put the code before (in your css template) :
(/style)
(/head)

/**************** bar and navigation styles ****************/

#container{
width:780px;
margin:80px auto; 20px; 20px;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
border:1px solid #a0a0a0;
}
#header1{
height:110px;
width:780px;
margin:0 1px 1px 1px;
background:#4cad2a;
color:#0099ff;
}
#header{
height:110px;
width:780px;
padding:0px 0 0 0px;
margin:0px 1px 1px 1px;
background:#4cad2a;
color:#0099ff;
}
#header1 h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}
#header1 h2{
margin:10px 0 0 20px;
font-size:1.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-1px;
font-weight:normal;
}
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#ffffff;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 7px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:#0099ff;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#ff0000;
color:#ffffff;
text-decoration:none;
}

Then, put this wherever you want. Strategically, put it under your header banner/header image or your blog's description in your template editor.

<div id="navigation"><br /><ul><br /><li class="selected"></li><br /><li><xxxxxx>page</a><br /><li><xxxxxx>page</a></li><br /><li><xxxxxx>page</a></li><br /><li><xxxxxx>page</a></li><br /><li><xxxxxx">page</a></li><br /><li><xxxxxx>page</a></li><br /></ul><br /></div>

Note: You must replace the xxxxxx with this - a href="your-url" -.
Now, you can be proud of your new menu bar because it looks more coll, clean and pro's right?