Lets try some horizontal navigation
The left column is good for secondary navigation.
Be sure to view the source and also the CSS so you can see how this is styled. In FireFox - go to the top menu, to VIEW > > Scroll down to Page Source and you can see the html. Once you are there, you can click on the link to the CSS and it will open up as well.
I started by making an ID div called nav and defining some styles for it.
My links are all unordered list items - so I need to style the the ul to remove the default padding and then the list item (li) to have no list-style-type. I gave the li a margin of 1 px so there is a small amount of space between each "button".
After this, I styled the links or the "a" tag. I tell it to display in a block, so each button will follow one after the other. The text decoration or default underline is removed, I set a width for my buttons and give them some margin and padding and tell them to float left. Then I add some decorative styling, the background color, font color, font weight and give it a border.
The a:hover styling comes next. I give it a background-image. Change the font color and this is done.
In the last piece of this navigation style, I add an "active" button style. This shows which page I am currently on. I use a class for this and can move it from button to button on the specific page I am on.
If you want to experiment, try changing your float to right. The buttons we reorder themselves starting from the right side. If you have HOME as the first button in your list, it will be the farthest to the right.