Menu image

Menu składające się z 5 poziomów
Jeden obrazek składający się z 5 wierszy, w każdym wierszu grafika normal i active kolejnego elementu.

Dodatkowo wykorzystamy menu_attributes – http://drupal.org/project/menu_attributes
W atrybutach elementu menu dodajemy class: icon menu_X np.
Oferta
class: icon menu_1
Galeria
class: icon menu_2

CSS: .icon{

display:-moz-inline-box;display:inline-block;overflow:hidden;

background:url(imageRollover.png) no-repeat;

text-indent: -3000px;

*text-indent:0px;

font:0/0 Arial;

color:rgba(255,255,255,0);

vertical-align:bottom;

width:100px;

height:100px;

}

.iconYouTube{}

hover.iconYouTube{background-position:-200px 0px;}

.iconFlickr{background-position:-100px 0px;}
hover.iconFlickr{background-position:-300px 0px;}

.iconRss{background-position:0px -100px;}
hover.iconRss{background-position:-200px -100px;}

.iconFeedburner{background-position:0px -200px;}
hover.iconFeedburner{background-position:-200px -200px;}

.iconDelicious{background-position:-100px -200px;}
hover.iconDelicious{background-position:-300px -200px;}

.iconTechnorati{background-position:-100px -100px;}
hover.iconTechnorati{background-position:-300px -100px;}

HTML:
<a href=”” title=”youtube icon” class=”icon iconYouTube”>youtube icon</a>
<a href=”” title=”flickr icon” class=”icon iconFlickr”>flickr icon</a>
<a href=”” title=”rss icon” class=”icon iconRss”>rss icon</a>
<a href=”” title=”feedburner icon” class=”icon iconFeedburner”>feedburner icon</a>
<a href=”” title=”delicious icon” class=”icon iconDelicious”>delicious icon</a>
<a href=”” title=”technorati icon” class=”icon iconTechnorati”>technorati icon</a>

Źródło:
http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/