Changing the nav sprite on entire nav background, not just one link - html

Question

I have a perfectly working html/css sprite nav. When each link in its unordered list is hovered over, the background sprite image changes as expected, for that specific item. I want to make the entire nav sprite move position based on which linked is hovered over, so that the effect for any one link changes the background for the entire unordered list.
Reason: the edges of each inline are not vertical, they are at a 45 degree angle, so changing a traditional block background doesn't work so well. Changing the entire background will accomodate and work perfectly.
Code in use currently:
CSS:
#nav {
position: relative;
float: right;
background: url('../gfx/nav.gif');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a:hover {
background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}
And the HTML:
<ul id="nav">
<li id="n1"><span>Home</span></li>
<li id="n2"><span>About</span></li>
<li id="n3"><span>Programmes</span></li>
<li id="n4"><span>Grants</span></li>
<li id="n5"><span>Publications</span></li>
</ul>
So how do I make the background sprite shift for the entire nav, vertically different amounts depending on which link is hovered over? Assuming this is possible without JS of any sort.
Thanks. :)
PS - As requested, current system presented on a jsfiddle - http://jsfiddle.net/NhL7E/
Note how the edges of each coloured link don't completely change on the hover - hence wanting to move the entire UL background as opposed to individual LI backgrounds.
ADDED AFTER MARKED AS ANSWERED
Thank you to Shive, Jcubed and Barry Dowd. All three responses were completely acceptable and each one of them achieved the target result. However the primary question still is truly unanswered - as no one has suggested an HTML/CSS only method to shift the entire background image sprite different increments, based on which link is hovered on.
If I could mark all three answers as accepted, I would. I chose to mark Barry's as this is the answer that was easiest to implement on my project. It required no graphical modification so I was able to use the existing sprite image. All answers had benefits over the others - less http requests by use of jQuery, smaller nav sprite by another and no JS/jQuery required... etc.
Once again thank you all - your responses, jsfiddles, answers... your time and effort in helping me is greatly appreciated!
Cas

Answer 1

Here you go:
You give each li a left and right margin of -4px (#n1 only add to right margin, #n5 only add to left margin)
You then need to add 8px to each li width (4px on the first and last)
Then add 4px to the left position of the li background image so -74px becomes -70px (leave the first as 0)
New CSS
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0 -4px;
border: 0;
padding: 0 0px;
list-style: none;
}
#nav li#n1 {
margin: 0 -4px 0 0;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 77px;
}
#n2 {
left: 74px;
width: 102px;
}
#n3 {
left: 167px;
width: 132px;
}
#n4 {
left: 292px;
width: 90px;
}
#n5 {
left: 375px;
width: 129px;
}
#n1 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}
JSFiddle http://jsfiddle.net/NhL7E/12/

Answer 2

2 Solutions:
First, you can change your image so that it has extra space between each section of the navigation and has a transparent background. http://i60.tinypic.com/sq3xjn.png
This allows you to make each li have its own background that changes on its own without it effecting how the other parts oft he nav look.
#nav {
position: relative;
float: right;
/*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 71px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a{
width:77px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}
#n1 a:hover{
background-position:0 -23px;
}
#n2 a{
width:102px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}
#n2 a:hover{
background-position:-77px -23px;
}
#n3 a{
width:131px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}
#n3 a:hover{
background-position:-179px -23px;
}
#n4 a{
width:89px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}
#n4 a:hover{
background-position:-310px -23px;
}
#n5 a{
width:128px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}
#n5 a:hover{
background-position:-399px -23px;
}
http://jsfiddle.net/gh6Aq/
The other options is to nest your li's in such a way that the element with the background image is the deepest element, then you can use hover states to change it's style.
Example:
<ul id="nav">
<li id="n1"><span>Home</span>
<li id="n2"><span>About</span>
<li id="n3"><span>Programmes</span>
<li id="n4"><span>Grants</span>
<li id="n5"><span>Publications</span>
<div class='backgroundElement'></div>
</li>
</li>
</li>
</li>
</li>
</ul>
Then:
#n1:hover .backgroundElement{
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
However this method basically kills the underlying structure of your navigation, so I would recommend using the first option.

Answer 3

As continued from comments, I am posting a jQuery(JavaScript) based solution because, the exact problem is that, we have background image on the ul and we are hovering over ul>li>a and there is no parent selector in CSS to manipulate parent elements's CSS property(baclground image of ul).
However using jQuery we can easily achieve it. So the jQuery code will be something like this.
$('#nav >li>a').on('mouseenter', function() {
var id = $(this).parent().attr('id');
switch (id) {
case 'n1':
$(this).parent().parent().css({
'background-position': '0 -23px'
});
break;
case 'n2':
$(this).parent().parent().css({
'background-position': '-0 -46px'
});
break;
case 'n3':
$(this).parent().parent().css({
'background-position': '0 -69px'
});
break;
case 'n4':
$(this).parent().parent().css({
'background-position': '0 -92px'
});
break;
case 'n5':
$(this).parent().parent().css({
'background-position': '0 -115px'
});
break;
}
}).on('mouseout', function() {
$(this).parent().parent().css({
'background-position': '0 0'
});
});
Here the benefit we get is that the background image is now loaded only once and not 5 times because each time someone hovered over the image previously was getting loaded again.
Here we just find the ID of the hovered element and re-position the ul's background image accordingly.
You will also not need the additional code for :hover in the CSS, so the CSS code will be something like this.
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
JSFiddle Sample