1.) Instead of an “empty” link just containing the hover image and a descriptive title (which even will lead some browsers to display the content of that title when hovering over the link) it’s better to have a link containing the image AND a link text, which is more accessible anyway. Since this would result in some undesirable cluttering of the layout without a slight modification, just wrap the link text within the link in a “span” tag and give it a classname (e.g. “link”). In your style definitions, give this class an attribute of “display:none;” and you’re all set up.

2.) If you need to have some horizontal space added before the links (to center the menu in a fixed width layout for example) just add a list item before the menu items containing a “div” tag with a fixed width attribute or containing an image if needed. Apply the same styling as for the “a” Tags in the list.

thanx for this simple solution, comes in very handy!

Two additional thoughts:

1.) Instead of an “empty” link just containing the hover image and a descriptive title (which even will lead some browsers to display the content of that title when hovering over the link) its better to have a link containing the image AND a link text, which is more accessible anyway. Since this would result in some undesirable cluttering of the layout without a slight modification, just wrap the link text within the link in a tag and give it a classname (e.g. “link”). In your style definitions, give this class an attribute of “display:none;” and you’re all set up.

2.) If you need to have some horizontal space added before the links (to center the menu in a fixed width layout for example) just add a list item before the menu items containing a tag with a fixed width attribute or containing an image if needed. Apply the same styling as for the Tags in the list.

Cheers!

I am unable to see the code working, i am using ie6 and ff2

the rollover works, but there is no menu.

Could you pl chk and let me know on which browsers this works