Hey Guy’s and Gal’s,

A while back Carlito mentioned in one of his comments about how I added the top menu to my blog, and if I designed the theme myself. And the answer is yes I did create the theme, based off of my main site at http://timothycaron.com where I provide website design and development services.

Below is the HTML Code and the Style information on how I created the top menu bar on this website.

Home
Menu Item
Menu Item
Menu Item
Menu Item
Menu Item

Note: the Class Attribute of “Active” is used to hightlight the tab to let users know what page they are on.

Below is the style information that is used for the above HTML Code.

#headerblank
	{
		float:left;
		width:100%;
		margin:0px;
		padding:0 0 32px 0;
		background:url(images/background image) repeat-x left top;
	}
#header
	{
		float:none;
		width:952px;
		margin:0px auto;
		top:0px;
	}
#header ul
	{
		float:left;
		margin:0px;
		padding:0px;
		width:952px;
		display:block;
	}
#header ul li
	{
		float:left;
		margin:0px;
		padding:0px;
		display:block;
		background:url(images/background image) no-repeat right;
	}
#header ul li a
	{
		float:left;
		padding:14px 43px 0 43px;
		height:29px;
		font-family: Verdana;
		font-size:13px;
		font-weight:normal;
		color: #fff;
		line-height:14px;
		text-decoration:none;
	}
#header ul li a:hover, a.active
	{
		float:left;
		padding:14px 43px 0 43px;
		height:29px;
		font-family: Verdana;
		font-size:13px;
		font-weight:normal;
		color: #fff;
		line-height:14px;
		text-decoration:none;
		background: #206ea6;
	}

Remember to replace your background image reference to the image reference that you will use for your background, in the appropriate places.

I hope that this helps everyone who might be interested in apply this type of menu to there websites. For those of you who would like to use this in place off your current menu or add an extra menu to your wordpress blog you can replace the <li><a href=”#”>Home</a></li> with <li><?php wp_list_pages(  ); ?></li>

I hope this helps

Have a wonderful day

Tim