Instead of the usual 'dull-looking' dropdown button we have used images; one for the regular and another one for the hover state. The process of creating the image changing effect has been explained here: Image Changing, but use a 'picture link' for the top image.
A hot tip is to let the original dropdown button stay until you have created the images with the changing effect. Then you transfer all the properties of the dropdown button to the container that has the background image, and give the attribute to the top image, in this case the b/w version. After that the original dropdown button can be deleted.
Some browsers have a problem with the dropdown still being open when returning to the page after clicking on a link. To avoid this, add to the Body a custom attribute as follows (see image): 1.On the Element tab select a new attribute, 2.Choose Custom 3.Write in the Name box: data-event-onunload 4.Leave the Value box blank
Dropdown with Images
Instead of the usual 'dull-looking' dropdown button we have used images; one for the regular and another one for the hover state. The process of creating the image changing effect has been explained here: Image Changing, but use a 'picture link' for the top image.
A hot tip is to let the original dropdown button stay until you have created the images with the changing effect. Then you transfer all the properties of the dropdown button to the container that has the background image, and give the attribute to the top image, in this case the b/w version. After that the original dropdown button can be deleted.
Some browsers have a problem with the dropdown still being open when returning to the page after clicking on a link. To avoid this, add to the Body a custom attribute as follows (see image):
1.On the Element tab select a new attribute,
2.Choose Custom
3.Write in the Name box: data-event-onunload
4.Leave the Value box blank
Download this component