You can view a demo here:

Structure the navigation menu using HTML

The first thing i would like to mention here is that we will be using the ‘Google web fonts API’ to integrate a custom font into our webpage. It’s a very simple process. You simply visit the site, find the font you wish to use, cut and paste some code from the site and your ready to go. You can view the site at http://www.google.com/webfonts

Very simple stuff, create an unordered list inside a DIV. Add in a few list items and specify an ID for the current page. Once we have this done we can begin styling the navigation menu using CSS.

Styling the menu using CSS / CSS3.

First of all lets give the page a nice dark background, the navigation menu is a nice off white colour and i think it will look best on a dark background.

1

2

3

html{

background:#2b2725;

}

Ok – now lets start with the menu. First of all, simply specify the width required for the navigation menu. The next 8 or so lines are all used to add a gradient background to the element. Each line is dedicated to a specific browser, dont worry though you dont need to remember all of this!