Layout for a Menu for All Browsers

Let us consider the case where the second menu item (with ‘>’) in the above drop down menu has produced a sub menu, and the second menu item of the resulting sub menu (not shown above) has produced its own sub menu. Under this condition, the set up for fig. 12.1 becomes:

Fig 12.2

The content of the first cell of the outer table is as before. The second cell of the outer table has two tables, one nesting within another. Now these two tables have not been drawn to scale. Both of them have the same width. I have shown them the way I have done above for the purpose of illustration.

Either of the tables has only one column. The table nesting within the other has a border of zero width, so I have represented its borders with dashed lines. This nesting table has two cells. The second cell has the table for the sub menu proper. This sub menu table has four cells; each of these cells has a link (A element).

The table has a border width of one pixel. The first cell of the nesting table has the space character “ ” so that it will not collapse, and so that its height will be the same as those for the cells of the table it is nesting within.

The nesting table is given the position property “position:absolute” for the same reason as mentioned above. The value for its display property is initially "none." When you have to see the sub menu (of the nested table), this value is changed to "block." 

The nested table does not have any position property or display property. It does not have to. Whenever the nesting table is displayed, the nested table is automatically displayed. When you do not want the sub menu, the value of the display property of the nesting table is changed to "none," and the sub menu is removed with the nesting table.

Let us now talk about the third cell of the one-row outer table. This cell also has two tables. One table nests within the other. The position and display properties of these two tables are correspondingly the same as those for the previous cell. These two tables appear when the mouse pointer goes over the second menu item (Sub link 111 >) of the previous cell.

When the mouse pointer leaves this cell, the two tables are removed. Also note this: when the mouse pointer points over a cell other than (Sub link 11 >) in the second drop down menu, the two tables in the second cell are removed. You will have the complete code later on.

There is still more to learn about the outer table of the second drop down menu. Let us rest for now and continue in the next part of the series.