This is a simple menu that has taken months of work. The widths of the dropdown and the flyout sub menus are not fixed and will be as wide as is necessary to hold the text on one line. The position of the flyouts is then placed at a 'percentage' position from the previous level to give a fixed overlap. Well in all browsers except IE5.x and IE6 it works like this.
These two browsers are the ones that have caused all the problems in getting this menu to work and I have had to settle for a comprimise solution. For IE5.x and IE6 the positions of the flyouts will be variable depending on the width of the previous link. In practice this works quite well and does not look odd.
Tested in IE6, IE7, Firefox, Safari and Opera.
Download skeleton.zip. Please read copyright conditions below before use.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.