A Menu for All Browsers

If you have some patience, then the code (or your own) here will work with all browsers. The secret of the code in this series lies in the use of HTML tables and the layout of the tables. When an HTML table is simple, any modern browser can handle it.

If you have been in the field of web designing for the past 10 years, then you would have heard that you should avoid using tables when it comes to layout. You will be surprised at the way the browsers will handle the HTML tables here; the reason is that the tables are simple and straightforward. When any table becomes complicated in design, browsers today find it difficult to handle.

A sub menu (including a drop down menu) is simple in its presentation. It is of a grid-like (one column) nature; so a simple HTML table can be used for it. In this series, each sub menu, no matter its level, is an HTML table. For the sub menus, you have one main table, with tables inside it. These tables inside are the sub menus. When you want to see a sub menu, you change the value of its display property to "block;" when you do not want to see it, you change this value to "none." This is how the design in this series is different from that of the previous series..

The links are no longer in SPAN elements. Each cell has a link. This greatly simplifies our code.

HTML tables are used as sub menus. Each cell and its link is used as a menu item. In this way we can easily give borders to menu items by giving borders to tables (cells). In the previous series, the problem of giving borders to menu items arises when you have a sub menu taking up some cells at the bottom. It is difficult to give these cells borders without the cells above them in the same column having borders.

This problem is solved in this series by making such sub menus an HTML table (inside the HTML table you expected). You then give all the cells in this table a border, as we shall see.

A lot of the design work here lies in the layout of the tables (and their configurations).