Finishing a Casual Navigation Bar with CSS Sprites
If you’re interested in learning how to use CSS sprites to create engaging, standard-compliant navigational mechanisms that can be used on different web sites with minor modifications, you’ve come to the right place. Welcome to the final installment of a seven-part series that shows you how to build CSS sprite-based navigation bars. This series walks you through the progressive development of a couple of appealing links bars, which use a single background image to define the visual presentation of their sections.
Finishing a Casual Navigation Bar with CSS Sprites - Creating the active state of the links bar (Page 3 of 4 )
As you may have guessed, creating the CSS styles that implement the “active” state of the previous links bar is only a matter of tweaking its background image via the corresponding X and Y coordinates. Since this process should be familiar to you at this point, I suggest you look at the code sample below, which implements this handy feature in a few simple steps. Here it is:
Definitely, understanding how the above CSS code works should be a fairly straightforward process to you, since it takes advantage of the functionality of the “background-position” CSS property to implement the aforementioned “active” mode of the links bar.
Also, notice that the sprites displaying the portions of the background image corresponding to this specific mode have been assigned directly to the links of the navigation bar, instead of their item lists. This implies that the implementation of this mode requires altering the markup to some extent as well.
Don't worry if this explanation sounds rather confusing to you, since in the last segment of this tutorial I’ll be coding some examples that will show how to activate different sections of the links bar by using the previous CSS code.
To see how these examples will be created, please click on the link below and read the following lines.
Style Sheets 
HTML5 Boilerplate Introduction
