Mini Hierarchical Menu Snippet

Explanation
(This Script is Netscape6 Compliant)
Updated - December, 2000.

Here's a snippet of a Hard Coded Image-mapped hierarchical menu example. You may ask me why did I put it here for free, since I usually do these scripts on a chargeable basis. Good question - here's why I have put this up for free:

I had originally used this Script on our Commercial WebSite at 3rd Millennium Studio. We are pretty much certain that, in spite of our vehement requests not to do so, a few (un-scrupulous types??) must have still pinched it off that web site. So, why not I let every one have the opportunity to take it officially?
Having said that, I must also mention that No Help is available for this script any more than what's given below. You'd have to figure out by yourself How to add more links or even modify it! That's how I intend to protect mine & my partner's business interests! Please do not contact me asking for help - unless, you are willing to pay us!!

Let's get on with the explanation bit now.

I'll not go into the details of how Browser sniffing is done as, that has been explained many times over, Plus I assume, most of you know it anyway. Bottom line is, this will only work on 4th Generation or later Browsers.
I'll also not go into the details of Show-Hide functions, because that's another point that I've explained earlier. (See "Onmouse Popup" for instance.). Same with css positioning. However, I think I should still go over it quickly, once again.
Because this Pop-Up Image map uses absolute positioning, within the "<Style>" tags we'll have to set the position properties. In this example, the HOVER button is positioned at Top:80; Left:10. To give the Pop-Up slight overlap, I have specified this image to show up at Left:20; top:99. You are Free to change these positions as you wish. Given that I wanted the Pop-Up to stay over the button image, I have set a "z-index" that's higher than that of the button.
So, okay, this little rectangular image pops up when you move your mouse over the Hover button. (Incidentally, since this won't work on older browsers in any case, the Menu image gets "written" only if you are using a 4th Generation browser through the standard JavaScript 'document.write' statement.). On mouseout event (from over the 'Hover' button), a Timer is set (I have kept it to 2000 milli Seconds) to activate the Hide function (to hide the Links Images) after a certain time.
But that's not good enough, is it? 2 seconds is too short a time for some one to choose a link, move the mouse over to that link & then click it! So here's what I have done.
Once you move your mouse over the Pop-Up Links Image, Timeout Function is cleared through "clearTimeout" call - meaning, the Pop-Up will not hide itself, instead will remain visible.
But, it will remain visible so long your mouse is over the image. Soon as you remove it, the 'Timer function' to activate Hide Function, re-starts. This time you get only 1/2 a Second (500 milli seconds - change it to whatever time you wish).
Finally, you must set the position of the page main document - without which, it will start from Top as usual by default. For instance, I have put all this 'Explanation' bit within a table that's positioned at Top:120;Left:0. Once you take a look at the Script, you'll understand this explanation better.
But then again, you may wish to position both the Hover Button as well as the Main page content as per the flow of the document itself (i.e. without CSS positioning) - choice is yours.

That's it folks - it's all yours if you want it. But remember - No Help from Me for this Script!!