Need to fix problem with multiple menus on one page!!!!!

It is assumed, for this menu to work properly without a hardcoded width, that the <div> containing this slide menu will be enclosed in a table, causing it to be 'shrinkwrapped' to fit the content. The reason for this is that CSS2 has no way of centring a 'shrinkwrapped' <div> (which I consider to be a serious missing feature). This causes the 'root' menu to be 'shrinkwrapped'; the submenus, having been plucked from the root menu and floated, will be shrinkwrapped automatically.

Of course, you can still set a hardcoded width for the main menu if you so desire by changing the 'width' attribute for the 'slide_menu' class. Likewise you can set a hardcoded width for all submenus by changing the 'width' attribute for the 'slide_menu_submenu' class.

The table containing the menu can be floated or non-floated; just make sure you DON'T specify its width, and it will shrinkwrap the menu!

This menu has been tested in the following browsers:
IE6 Minor problem sometimes occurs repositioning submenus several levels down (4 or more) when browser is resized; otherwise works, as long as you don't trigger IE's positioning bug.
IE7 Minor problem sometimes occurs repositioning submenus several levels down (4 or more) when browser is resized; otherwise works, as long as you don't trigger IE's positioning bug.
Firefox 1.0.7 Very minor problem (1px) with root menu width; otherwise works.
Firefox 1.5.0.1 Works.
Opera 8.54 Popup submenus will be positioned behind IFRAME elements. This cannot be changed, and is incorrect behaviour; the popup submenus are absolutely positioned and should appear on top (see here). Fixed in Opera 9.
Opera 9.00 Works.
Konqueror 3.4.0 Works.
Safari 2.0.3 Works.
Lynx 2.8.4, and any other browser with no JavaScript support Because the SlideMenu HTML code is based on a <ul> element, will drop back gracefully to an unordered list.


Because it's based on a <ul>, it will drop back gracefully to an unordered list and look 'alright' .....

IE's positioning bug
Internet Explorer has a peculiar positioning bug that will prevent this menu working properly under certain circumstances. This applies to IE6 and, unfortunately, also to IE7, as it still does not seem to be fixed.
This bug occurs when the menu is placed inside a DIV element that has a CSS 'border' set, and has an explicit 'width' set (it doesn't seem to occur if the width is left to auto). It may apply to other elements than DIVs, I'm not sure; it doesn't seem to apply to tables.
IE fails to incorporate the border's width into the offsetLeft and offsetTop JavaScript values of contained elements. So, if the slide menu is put inside one of the aforementioned DIVs, this will cause its submenus to be positioned incorrectly relative to the root menu.
Unfortunately, the only really effective way to avoid this is not to put one of these menus inside an explicitly-sized DIV with a border. Use a table instead if you want it to work properly in IE. A JavaScript code fix would be far more difficult to implement, as this bug may apply to elements other than DIVs that I'm not aware of. Also, other browsers do not have this same bug.

text, second menu should follow...



Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...
Filler text...