I'll be honest, it gets a little tricky here so hopefully you can follow along. I apologize in advance for this but with all the arguments of well-formed docs, semantics and table-free CSS; this is the simpliest way I've found to create a menu out of an unordered list. You ready? Here goes. Right now your web page should look like this and the HTML for the main menu is formatted like this...
Also your CSS for the main menu should simply be this...
All good right? By default unordered lists in HTML have a bullet point to the left of each list item along with some margins and padding. It's time to get rid of these values. Since we only want modify these values from the main menu's unordered list, we'll use some shorthand. The <ul><ul> tags reside within the <div id="main-menu><div> tags so we'll add the unordered list selector right after the main-menu id in our stylesheet making sure only unordered lists within the main-menu division use the following styles.
Now only the unordered lists that reside in a <div> with the id "main-menu" will use the properties and values we'll be adding. Next, let's get rid of the bullets, margin and padding.
How are we looking? Those list items <li> are still mocking us and who the hell are they? Get in there and show them they ain't nothing. We're going to "float" each list item left so they stack next to each other and give them a width (since there are five, let's go 20% that should equal 100% right?). Just like the above, the <li> resides within both the <div id="main-menu> and <ul> opening and closing tags so we'll drop the first selector for the list item in like this.
How are you making out? Does your page look like this? Great, let's format this puppy and put in some padding, color and text alignment. Not to mention removing that underline from the text. Since all of the text are hyperlinks we drill down to each one using the anchor selector "a".
At this point, I've need to note that I have no idea why the last two selectors (#main-menu ul li | #main-menu ul li a) could not be combined into one. I never found a solution or a reason why it will not work. Try switching selectors between the two and you'll see what I mean when it breaks. If anybody has a fix or a reason please shoot me an email.
Back to brass tax. Buttons normally have a little beveling right? Using CSS we can mimic this effect without using Photoshop. Take the background color of these menu buttons and picture a ray of light coming from the top left of these buttons. What we need to do is add borders with a lighter tint to the top/left and two more borders with a darker shade to the bottom/right of each button. This will give the illusion that the menu buttons are popping out a bit.
Everybody loves the "hover" state right? You know, when you move your mouse over a button or a link and it changes it's state or look. No sweat, just use a different background color and add the following below the CSS we presently have.
You've made it, this is probably the most confusing section we'll cover. Alright, double-check your page and download the sample. If your page looks the same and the buttons change when you put your cursor over them, we're golden. In essence, you've created a basic website. Just add some more pages, link them up in the main menu and you're all set. But...If you've got game, head on to the next chapter.