I have had many requests recently for a single level dropdown menu that uses images in place of text for the top level and the sub levels so I thought that I would demonstrate a very simple method of doing this.
The above menu uses just six images and is very simple to produce. The top level is just one background image held in the containing div and each of the sub menus is also just one image placed in the containing ul. Each link is then mapped on top of the corresponding image and has a rollover state where an arrow is added as a background image in each link.
Tested in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome
The images used are as follows
The top level list (reduced in size to fit this page width)
The 'Products' sub menu
The 'Services' sub menu
The 'Outlets' sub menu
The 'Terms' sub menu
The rollover arrow
I will be producing a more complex version shortly which will use individual images for each link with rollover.
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.