In this part of the series, I explain the nature of the menu items and how they fit into the tables of the sub menus and main menu. I spend the rest of the article talking about the style attribute of the tables of the sub menus. A lot of the design in this series lies in the configuration of the tables. In fact, we shall spend more time talking about the configuration of the tables than we shall spend talking about the JavaScript code.
Layout for a Menu for All Browsers - The Style Attributes (Page 2 of 4 )
Here I talk about the positioning and display properties of the tables for the sub menus. These properties are written in the style attribute of these tables. I use our example, described in the previous part of the series, as I explain the principles. I will use this example for the rest of the series.
Main Table for the Sub Menus
The main table has a position property. The value of the position property is absolute. Now the left and top properties for this table are not given. Under this condition, the table should remain where you place it in your design, according to the normal flow. I have placed this table below the table for the main menu. It remains there.
So if the widths of the cells of this table are the same as the width of the cells of the table for the main menu, a drop down menu will appear below its corresponding main menu item; there will be good alignment between the main menu item and the drop down menu (everything being equal).
If the value of the position property is not absolute, well, the table for the sub menus will still be where you have placed it, but it will occupy space and will not appear in front of the HTML elements in the BODY element. We want this table to appear in front of those elements when you want to see a sub menu. In this way, the sub menu also appears in front of the elements. This is how browsers today behave.
This table is the one that has the sub menus. If it appears in front of the elements on the BODY, then the sub menus would also appear in front of those elements. To make it appear in front of the elements, it is given a z-index value of 10. You can assume that the BODY element has a z-index of zero and the elements on the BODY, according to the normal flow, have a z-index of one. This assumption usually works.
I chose the value of 10. You can choose any high value. Hardly will the author of a web page give a z-index value that is up to 10 to any element in his web page. A z-index value of 10 is good for the table of the sub menus.
The initial and default value of the display property of this table is "none." When a drop down menu is to be shown, this value is changed to "block." When you do not want any sub menu, this value is changed back to "none."
HTML 
/ 4 
A Vertical Menu for All Browsers
