Now for menus, everybody wants rollover effects. You're just not one of the cool kids, if you don't have rollover effects on your menu. (And if you don't know what rollover effects are already, I'm afraid you're not one of the cool kids. But stay tuned: salvation is at hand!) In the bad old days everyone would just stick in a bit of copied javascript and call it good enough, but today we're both simpler and more sophisticated: we do it all with CSS and our friendly little list.
The first step in turning a list into a menu is to get rid of those pesky bullets, which is accomplished with the following addition to your style.css:
And they're gone. This particular type of selecter is called descendent selector: it applies to all <ul>s contained within the 'menu' div (that way we can still use regular lists elsewhere on the site). Since this rule is fleshing out the menu, I put it right below the #menu selector.
Next, give the list some body:
(Again, the border is only temporary, to show us where the list ends.)
With the <ul> handled, we move on to the <li>s themselves, which are easy enough:
While the <li>s now have bottom borders, however, the top one doesn't have a top border (besides the ugly black box). To fix this, just replace the border declaration of the <ul> with
And then comes the fun part: turning the links into buttons. Watch:
Aside from the colors, the change is subtle, but note that you can now click any part of the 'button' defined by the links' bottom borders (or mouse over any part for the hover effect).
Finally, we need to get some more interesting hover effects. We'll start by adding a few more declarations to '#menu li a', as follows:
And then we define the hover state:
And so we're done with the menu. Much more can be done to fancy up the buttons, including the addition of background images, but for the moment at least I'll leave those to you to figure out. Your complete #menu code should now look like this (I make one further change below, adding the :visited and :active states):