skip to content
Website Builder

A CSS image map dropdown menu

1st November 2009

Maecenas dui velit, ornare sit amet fermentum et, mattis id tortor. Suspendisse commodo velit ac erat adipiscing vel aliquam risus ultricies. Nunc tincidunt metus ac risus egestas eu iaculis lorem fermentum. Vivamus fringilla elementum felis ut lobortis. Morbi lorem erat, volutpat vel elementum eu, bibendum id arcu. Sed nisl neque, dapibus sit amet adipiscing vitae, consectetur vel sem. Suspendisse lacus orci, sagittis in dapibus sed, lacinia vel nisl. Phasellus fermentum egestas ullamcorper. Aenean elementum diam sed diam dignissim adipiscing. Nunc vehicula bibendum urna, id sagittis neque bibendum sit amet. Ut eu sapien augue. Etiam justo erat, adipiscing non feugiat at, dapibus a nisl. Duis mattis consequat mi, nec posuere sapien commodo eu. Mauris tempor vehicula risus nec cursus. Curabitur varius mollis risus. Aliquam bibendum, neque quis interdum dignissim, urna libero hendrerit augue, eget aliquet nunc sapien eget leo. Sed dapibus, lorem quis consequat pulvinar, arcu nulla ultrices turpis, nec adipiscing nisl est non arcu.



©2009 stu nicholls - CSS play

CSS play Support


CSS play Recommend

Free, practical CSS menus, layouts, and examplesSitegrinderPSD to HTMLuk white label shopping carts for resellers



Information

I am getting more and more requests for dropdown menus that use an image map for the top level list items so I am posting this as a fairly easy solution to the problem.

This menu uses just two images, one for the normal unhovered state images and the other for the hover state. These images also provide the background for the dropdown menu to give a seamless transition between the top and item and the sub menu.

These two images are shown below (reduced in size to fit the width of this column).

unhovered map
hovered map

Tested in IE6, IE7, IE8, Firefox, Opera, Google Chrome and Safari(PC)




Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund is now required for this demonstration.

2. 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 again a donation to the 'Support CSSplay' fund is required.

3. 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.

Terms and Conditions

This menu can be used subject to the following terms and conditions.

  1. If you wish to use this menu in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this menu on another site for others to download.
  3. You may NOT redistrubute or resell this menu.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.


CSS play Recommend

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth