In this third part of the series, we continue with the style attributes of the tables of the menu. After that we shall talk about the IDs of the tables and the IDs of their cells. As I said in the previous part of the series, a lot of the design in this series lies in the configuration of the tables. We just have to carry on talking about the tables. We shall talk relatively little about the JavaScript code, later in the series.
Configuring Tables for a Menu for All Browsers (Page 1 of 4 )
Having Two Menu Tables in a Cell of the Outer Table
Notice that in the second drop down menu, there are two menu items with the ‘>’ character. The sub menu in the center cell, that we talked about, corresponds to the first ‘>’ in the drop down menu.
Remember that this center cell has a table nesting in another, and that these two tables form a sub menu. In order to display or remove the sub menu, you have to change the value of the display property of the nesting table.
There is another pair of tables like this, still in this center cell. We have not talked about this before. This pair forms the sub menu corresponding to the second ‘>’ character in the drop down menu. This is its outline:
Fig 13.1
The nesting table for fig 13.1 has three rows, and the first two rows (cells) each have the ‘ ’ character. The last row has the nested table, which has two rows, each of which has an A element.
So you have two nesting tables in the center cell of the one-row outer table. The initial and default value for each of the nesting tables is "none." Under this condition, neither of the nesting tables occupy space in the center cell.
Only one of these nesting tables can be displayed at a time. In other words, only one of their values for the display property should be set to "block" at a time. The one whose value is set to "block" occupies space in the center cell, while the other one does not take up any space. You will have the complete code later.
HTML 
Table Attributes for a Menu for all Browsers
