EFFECTS - CSS: Professional Techniques for Modern Layout - page 182

Figure 5-34: The two halves of the sprited tabs.

… and the hover-ef ect CSS looks like this:

ul.nav li:hover { background-position : 100% 400px ;}
ul.nav li:hover a { background-image : 0 400px ;}

It's also quite possible to turn this whole idea on its side, and have l exible tabs that jut out
along the side of a design. In that case, you'd slice a big tab image horizontally instead of
vertically, as in Figure 5-35.

184

Figure 5-35: The two halves of a set of horizontal tabs.