Doing it with style
I have been meaning to produce this menu for some time as an alternative to my jQuery/javascript version which can be seen here jQuery horizontal tabs with slide down sub menus.
This version has the same action and in Firefox 4, Opera, Safari, Chrome, iPhone, iPod Touch and iPad the sub menus slide down/up when hovering the arrorws.
All the top level list text can be links to other pages and hovering these will have no effect on the sub menus. But if you hover over the adjacent down arrows the sub menus for that section will be shown.
Tested in IE6, IE7, IE7 emulation, IE8, IE9, Firefox, Opera, Safari, Chrome, Flock, SeaMonkey, iPhone, iPod Touch and iPad. It should also work in Mac browsers. The iPhone, iPod Touch and iPad required additional code and styling to use a top level link in place of the div:hover to open the sub menus.
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.