Layout for a Menu for All Browsers

Each table for a drop down menu is given the position property. The value for the position property of these tables is "absolute." The left and top properties are deliberately omitted. Because of this condition, everything being equal, the table remains where you place it in the cell of the main table (for the sub menus). The z-index property is not given. Since the main table has a z-index property value of 10, each of these tables is at a z-index level of 10.

The initial and default value of the display property for each of these tables is "none." When you want to see a drop down menu, this property value is changed to "block." That is, when the mouse pointer goes over the corresponding main menu item (of the horizontal bar), this value is change to "block."

The Second Drop Down Menu

When the mouse pointer goes over the second main menu item, you see the second drop down menu. This is the outline of the resulting table for this menu:

Fig. 12.1

When the second drop down menu first appears, the display nature is as shown above. You have a one-row table with three cells. The first cell has a five-row table of one column. This inner table is the drop down menu. The position property of the outer table is “position:absolute.” With this property and its value, if the left and top properties are omitted, the table stays where you place it. This is with respect to the main table. The value of the position property of the inner table we are seeing is also "absolute," for the same reason as above, but this time with respect to the outer table (above).

The initial and default value of the display property of the outer table is "none." When the second drop down menu is to be seen, this value is changed to "block." When the value is "block," the situation is as shown above (fig 12.1). The value of the display property of the inner table above is always "block." So, whenever the outer table is displayed, you see the above inner table.