When coding web pages, one always has to keep in mind that not all browsers handle the same code in the same way. This can be painful to deal with when coding certain features, such as menus with multiple drop-downs. Wouldn't you like to add a menu that features drop-downs and can be handled cleanly by any browser to your web site? Keep reading; this ten-part series walks you through building a common browser menu.
Creating a Common Browser Menu - Laying Out the Menu Items (Page 3 of 4 )
We shall consider an example made up of five items in the menu bar. The TABLE in the DIV element has five rows and five columns in our example.
Outline of Main Menu
This is the outline of the main menu.
Main link 0
v
Main link 1
v
Main Link 2
v
Main Link 3
v
Main Link 4
v
You have the first item, Main link 0, followed by its drop down button, v. You have the next item, Main link 1, followed by its drop down button, v, and so on until the fifth item, Main link 4, followed by its own drop down button.
Outline of Vertical Menu List
This is the outline of the DIV element and its content:
<DIV>
Sub link 00
Sub Link 01
Sub link 02
Sub link 03
Sub link 04
Sub link 10
Sub link 11
Sub link 12
Sub link 13
Sub link 14
Sub link 20
Sub link 21
Sub link 22
Sub link 23
Sub link 24
Sub link 30
Sub link 31
Sub link 32
Sub link 33
Sub link 34
Sub link 40
Sub link 41
Sub link 42
Sub link 43
Sub link 44
</DIV>
As we said, the DIV element has the HTML TABLE inside. Assuming that each item in the vertical list from a drop down button does not have a sub vertical list, then the above table outline shows the cell contents. Each cell has a link element (<a></a>). The numbers show you how to identify them. Counting (indexing) begins from zero. The first row is row zero, the second is row 1, and so on. The first column is column zero, the second is column 1, and so on. With the identification of the links, each number begins with two digits. The first digit is the row number; the second is the column number.
HTML 
More Top jQuery Plugins for Menus
