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 - Sub Menu for Last Drop Down Menu (Page 2 of 4 )
There is a menu item, “Sub link 34 >”, in the last drop down menu. When the mouse pointer goes over this menu item, you should see a sub menu. Now this sub menu appears on the left of the drop down menu; we made this decision because we assume that there is no space on the right for the sub menu to appear.
For simplicity I have put the sub menu in the fourth cell of the main table. This sub menu has two tables: one nesting within other, in the same way given above. This is the sub menu:
Fig 13.2
This table (the nesting table) and the drop down menu table for the fourth (last but one) cell of the main table are all in that fourth cell. The initial and default value for the display property for each of these tables is "none." Under this condition, none of them occupies space in the fourth 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 can be set to "block" at a time. The one whose value is set to "block" occupies the space in the fourth cell, while the other one does not take any space.
Concerning the two tables for the sub menu, the width of the nested table is the same as the width of the nesting table. For simplicity, this width is the same as the width of the fourth cell of the main table. Concerning widths, always give the widths for the table cells and tables; otherwise, some browsers will not handle the code properly.
HTML 
Table Attributes for a Menu for all Browsers
