CSS Menu

Let's start with the html. Make a new document and name it cssmenu.html. We need to create a container for the menu with a div id called MenuHolder. Place this html code in between the body tags of your page.

right now your menu looks like a list. Now we can add the css rules to style the menu. First, in the head of your html document put this line in to attach an external stylesheet: <link href="/img_articles/16656/cssmenu.css" rel="stylesheet" type="text/css" /> . Then open a new document and name it cssmenu.css and put it in the same directory as you html page.

In your cssmenu.css document put these lines to style the menu. If your using your own images for the menu background and highlight, you may have to tweak the padding a little if your using a different size then 15px X 40px

The last set of rules deals with the current page being highlighted in the menu so make sure to put the class="current" (see above html) on each page that corresponds to that link. Also, on the last set of rules, notice the top-padding was shifted down 1px from 12 to 13. This is to enhance the effect of the button being depressed.