A Vertical Menu for All Browsers - Third, Fourth and Fifth Drop Down Menus
(Page 3 of 4 )
The diagram of these sub menus is as follows:
Fig. 17.4 Third Drop Down Menu
Fig.17.5 Fourth Drop Down Menu
Fig.17.6 Fifth Drop Down Menu
As you can see, each drop down menu table is inside another table. The nesting table has one or more cells above the nested table. We have seen this technique before. The nesting and nested tables are of the same width. To compensate for the border of the nested table, the cells of the nesting table, above the nested table, have the property “padding:1px” in their style attribute.
As you can see, the lower down the nested table is in its nesting table, the lower down the menu appears on the screen. Following our design, all the cells, independent of the table they are in, are of the same height. This is partly because the same font characteristics are used throughout. There is alignment between the sub menu top edge and the top edge of the corresponding main menu item.
All of the blank cells above have the character. This prevents the cells from collapsing.
Next: The Second Drop Down Menu >>
More HTML Articles
More By Chrysanthus Forcha
