I have already explained How these work in other places. So, I'm not going repeat that here. Basic Show-Hide functions remain same as in "OnMouse Pop Up" Menu. BUT, given that the Menubar is in a tabular format (you'll know once you download & take a look at the script) there are a few points that MUST be mentioned.

A preamble, is however, necessary.

This Menubar is somewhat similar to the Menu, I used to have on my page. OnMouse over the Button, the main Menu (Categories) becomes visible - then onMouseover each Category, respective sub-menu drops down. The script being reasonably small, it can also be used on No-Frames pages.

Okay, so let's get back to the explanation bit.

• First thing you must always remember is that CSS/DHTML adoptability of Browsers, especially if it's Netscape. Netscape is VERY sensitive to the Positioning in a tabular form.
• So how does it work? There are basically, two parts to this script.
  1. The First part is the JavaScript portion. This essentially contains two functions which I have named "changein" and "changeout". Of these two, CHANGEOUT hides a division and CHANGEIN shows it.
     In the Script section, you'll also find a third function called "nothing". In fact, as the name implies, it really doesn't do anything. As you'll see, I have used this for the MAIN HEAD "<a href=" tags. Therefore, even if anyone clicks these MAIN links, nothing will happen!
  2. Next step was to create the Style Sheets for each division. In this example, I have 4 MAIN HEAD wrapped in a SINGLE TABLE & 4 SUB-MENUs. All these, as you see, are "HIDDEN" by default. In the Style specification, I have named the the table for Main Heads as "#lists", while the Sub-Menus are called Linkpage1, Linkpage2 etc. ( I should clarify, what you name them is NOT important. Call them "TOM" and "JERRY", for all I care!! Also, if you need to add more Heads & Sub-Menus, be my Guest!! Just follow the same route.)
     Since, the Sub-Menus are to appear at the same position, I have created a CLASS style called "links". I have positioned the sub-menus at identical position, at left:10;top:220;
     Here again, where you position them, is a decision you have to take. I just thought, this would look "Cool!.

     A few more points to remember -

     You MUST specify the "font-size" of the "a" tag, in pixels, within the Style tags - otherwise these will change according to the Viewers Screen resolution/font size settings. In this example, I have set them to "font-size:12px "

• Finally, before you put this up (provided you haven't made any alterations - besides the usual stuff like Background Color, Text Color etc) please try it out on your PC with both Netscape & IE. In fact, this is a practice one should always follow when using DHTML.