Mapping a drop-down menu over an image

Question

I have a menu bar that is rotated slightly. Here are two buttons as an example:

As a result, I can't use regular HTML to handle this. I need to use a <map> to put hyperlinks over the menu parts. (Or am I missing a killer CSS feature I don't know about?)

I want to map drop-down menus to these buttons. This looks like a nice way to implement drop-down menus: http://javascript-array.com/scripts/simple_drop_down_menu/

However, this does not work on <map>s, I believe. Or am I wrong? Is there a different approach I can take to constructing drop-down menus for a menu bar that is not aligned horizontally?

Answer 1

Do you want the dropdown menus to cascade on an angle too? if so I think you are out of luck in normal HTML/CSS.

If you are open to Canvas & SVG there are some options, but you won't have any support in IE until IE9 (SVG only, no Cavas AFAIK)

Answer 2

What about slicing up the nav into multiple images... one menu item for each image? Then you could build the dropdown off of each image, rather than using an image map. This would also give you the added benefit of turning your nav into a list, which would be more semantic.

Answer 3

May be this link might help you

http://www.smartwebby.com/dhtml/drop_down_menus.asp#explanation

http://www.cssplay.co.uk/menus/image-map-menu.html