Defining a Navigation Bar`s Hover State with CSS Sprites
In this penultimate part of the series, I show how to use the previous CSS sprite background image to define the look of a casual, artistic blog navigation bar in its “hover” state. The simple styling process shouldn't give you any major problems when you use this approach to build a navigation bar for your own websites.
Defining a Navigation Bar`s Hover State with CSS Sprites - Defining the navigation bar's hover state (Page 3 of 4 )
As you may have already guessed, decorating the sections of the blog’s links bar in its “hover” mode is only a matter of modifying the X and Y coordinates of the corresponding background image, thus displaying the correct portion (or sprite) of it. This task can be easily accomplished via CSS in the following manner:
That’s not rocket science, is it? As I expressed before, defining the visual presentation for the “hover” mode of each section of the navigation bar is a straightforward process reduced to assigning the correct X and Y coordinates to the bar’s background image, and nothing else. For obvious reasons, calculating the values that must be assigned to each of the above coordinates does require doing some math, but nothing that you didn't learn in elementary school!
At this stage, the development of this sample links bar is nearly complete, as its “normal” and “hover” states have been properly defined via the implementation of CSS sprites. Nonetheless, the last step that must be taken is to tie the previous CSS styles to the blog site’s markup, so all of the pieces of this puzzle can fit together as expected.
This assembly process will be done in the last segment of the tutorial, so read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
