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 menu 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 have the list items set to display: inline so they will come in one after another on my navigation area.
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 padding. 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 do give it a background-color, but also give it a background-image. Change the font and border 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.