Doing it with style
The ONLY gaphics used in this menu are the right and left arrows to indicate the sub menus.
This takes one of my anywidth menus and applies CSS3 styling to give corner radii, drop shadows, gradient fill, and fade in transitions.
The only two 'final release' browsers that can reproduce all these styles are Safari and Google Chrome, but I am informed that the next release of Opera and Firefox will be able to correctly style this menu. I will add the additional styles when the new versions of these browsers is released.
So Safari and Chrome will have all the styles, Firefox will have the border radii and drop shadows, Opera and IE8 will just have the plain boxes with gaps between the sub menus and finally IE6 and IE7 will have a plain dropdown/flyout menu.
So another menu that would have taken many lines of javascript can now be achieved with just a couple of lines of CSS.
25th January 2010
Firefox v3.6 released which now supports gradient fills, so I have added this to the menu.
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.