Another flyout menu, but this time using background images to create the menu and sub-menu links.
Based on the Magic Menu #7 this menu uses the original conditional comments for IE5.5 and IE6 and validates as xhtml1.0 strict.
The menu is basically a vertical menu with up to five levels of flyout. Normally this would take up a lot of vertical space as each sub level menu drops down from the previous level, but with this menu alternate sub levels pull up instead. As can be seen if you follow the 'Contact' sub levels the first level pulls up then the next drops down followed by a pull up and so on, the outcome of which is that the menu unfolds horizontally instead of vertically.
This menu also has overlapping sub menus with transparent gaps between each level link, and to make it easier to navigate it also has a largish overrun area so that you can move your mouse off the list and the menu does not collapse.
Tested in IE6, IE7, Firefox, Netscape, Mozilla (no longer supported), Opera and Safari (PC).
By popular demand I have zipped up the basic menu with the stylesheet in the page head together with the transparent.gif used in the CSS. You will need to provide the background image as the one I use is copyrighted, and you will need a standards compliant doctype for it to work in IE7. Remember, if you use this menu then please keep the copyright information in the stylesheet.
Download the zip file three-up-two-down.zip
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.