Step 2 – Creating and Positioning the Top Level Menu Items
To our page, lets start by adding another DIV which will contain our navigation bar items and a List of menu Items:
If you browse to the page now, before we have added any styles, you will see the following (not very stylish):
Therefore, lets modify the style sheet and add the following styles in order to position and style our top level menu items:
There are a few styles worth noting here:
Firstly the * Style, shown towards the top, ensures that we reset any default positioning applied by the browser template. If you have done much web development you will have noticed that pages display slighltly differently based on the browser you are using. By adding this style I am ensuring the body content will always be posiiton flush with the top of the page.
I have also applied a z-index property to the navigationBar DIV to ensure that the menu and its drop down menus will display on top of any other page element.
I have added some text shadow to the menu items. This is a newer CSS property and so will not be available in all browsers and will simply not be applied if the browser does not support Text Shadow.
I like to apply new effects and styles where possible but the golden rule is not too implement a style which will cause the element to look out of place if the style is not supported by the browser and so cannot be applied.
Ok great, so now if you browse to the page we should see our navigation bar taking shape: