Skeleton dropdown menu
9th November 2007
copyright © stu nicholls - CSS play
Information
I have recently produced this menu for my other site stunicholls.com using a little javascript to make it work in IE5.x and IE6. But this is the non-javascript CSS only version.
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.
Copyright
Because of all the time and effort spent in producing this demonstration
I would ask that you respect my copyright.
- If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated. - If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.
- If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
