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:
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.
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.
