A Menu for All Browsers

The main menu is a small HTML table, similar to what we had in the previous series. However, here I did not include the drop down button (cells); there are no drop-down buttons. Each main menu item is a cell, which responds to the onmouseover event, which produces the drop down menu. I made this just for the sake of change. This is the table:

<table cellpadding="0" cellspacing="0" border="1" width="900">

<tbody>

<tr>

<td class="link" id="D0" onmouseover="dropDownMenu('D0')" width="125"><a href="mainlink0.htm">Main Link 0</a></td><td class="link" id="D1" onmouseover="dropDownMenu('D1')" width="200"><a href="mainlink1.htm">Main Link 1</a></td><td class="link" id="D2" onmouseover="dropDownMenu('D2')" width="250"><a href="mainlink2.htm">Main Link 2</a></td><td class="link" id="D3" onmouseover="dropDownMenu('D3')" width="200"><a href="mainlink3.htm">Main Link 3</a></td><td class="link" id="D4" onmouseover="dropDownMenu('D4')" width="125"><a href="mainlink4.htm">Main Link 4</a></td></tr>

</tbody>

</table>

In the previous series, the sub menus (drop down menus included) were in a DIV element; they were in one table, which was in the DIV element. Here, you have a main table that replaces the DIV element. You do not have any other (main) table in between this table and the sub menus (each of which is a small table).

The outline for the table of the sub menus is:

<table id=“MT”>

<tbody>

<tr>

<td>

<!—drop down menu table -- >

</td>

<td>

<!—drop down menu table with other cells (columns) for tables on its right -- >

</td>

<td>

<!—drop down menu table -- >

</td>

<td>

<!—drop down menu table -- >

<!—sub menu table produced by last drop down menu-- >

</td>

<td>

<!—drop down menu table -- >

</td>

</tr>

</tbody>

</table>

This main table for the sub menus has only one row. Each cell has a table where the value of the display property can be changed from "none" to "block" and vice versa. The second drop down menu is also a one-row table. It has three cells. Each cell contains a table. We shall look at the details later.

The last but one cell of the main table actually has two tables. The first one is the expected drop down menu; the second one is the sub menu produced by the last drop down menu. We shall see the details for this later. Go through the above table to appreciate it.