Active Navigation State

The navigation for my client site contains a different 'state' for whichever page is currently selected. As far as I could see there are two ways of doing this, one with CSS, and one with different images. The different 'state' looks like this;



The first, and more complex, way of achieving this look would be with CSS. To attempt this way I followed a tutorial online which states 'CSS Sprites' would have to be used. This is where one image would contain the three states of each navigation item, these are default, hover, and active. It would look something like this;



Using this with some clever CSS;

/*--CSS Sprites - Default State--*/
ul#topnav a {
float: left;
display: block;
height: 58px; /*--NAVIGATION HEIGHT--*/
text-indent: -99999px; /*--MOVES THE TEXT OFF THE PAGE--*/
background-position: left top;
}

/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -58px;
}

It gives the effect that the image is changing, when infact it is just moving up and down allowing different bits of the image to be shown.

The second way is alot more simple and just contains HTML and two separate images. One image of the default state, and one of the hover/active state. The HTML is as follows;



This just states on mouse over the image changes to the hover state, then when the mouse moves away again it goes back to the original image. It is then possible to create the appearance of the CSS method by just putting the hover state as the default image.