CSS Tutorial: Developing a css Navigational Menu

You can develop your own navigational menu both vertical and horizontal using css. All you have to do is to follow these simple steps.

Step 1: Constructing Markup

Unordered list is used to construct menus, because in it you define each link in a separate list item. In this way you can define same style for all list items, as well as you can give them proper spacing and position:

Step 2: Constructing CSS

First of all define background and size of the menu:

Here I have define an image for the background, the width of menu, font and font size for text, the margins of menu from its top, right, left and bottom and padding for items with in; padding is actually space of items with in an element or section from its edges. The div tag defines a section of a document, which has given class nav. The class nav is being used to give width, background, margins and other styles to div. The background-repeat property is set to repeat-x if the menu is horizontal menu, it is repeat-y for vertical menu.