CSS Sprites, puzzle - html

Question

May be this seems silly question for you guys.. Its about CSS Sprites. I have a navigation which contains 4 menus like.. HOME COMPANY SERVICES SUPPORT although I used a css sprite that have 3 mode/state for static, hover and selected(class called 'current'). I used to call them like..
ul#top-nav-links {list-style:none; background:url(../images/nav-bg.png) no-repeat scroll 0 0; width:508px; height:35px; float:left; margin-left:80px; margin-top:33px; padding-left:4px; margin-right:23px;}
ul#top-nav-links li{float:left; position:relative; z-index:99999;}
ul#top-nav-links li a.home01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
ul#top-nav-links li a.company01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:150px; height:31px; text-indent:-999px; float:left; background-position:-100px 0px;}
ul#top-nav-links li a.services01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:140px; height:31px; text-indent:-999px; float:left; background-position:-250px 0px;}
ul#top-nav-links li a.support01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:115px; height:31px; text-indent:-999px; float:left; background-position:-390px 0px;}
ul#top-nav-links li a.current{background:url(../images/nav.png) no-repeat scroll 0 -62px; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
and here is the image I used
so I need to display the middle colored one on hover state, although the last one for the current state, of course the current state wasn't need hover effect..
I know, It should call like this..
ul#top-nav-links li a.company01:hover{background-position:-100px -31px;}
but I curious if somehow that code should be shortened by avoiding to call each menu as separate instead like this...
ul#top-nav-links li a:hover(background-position:0px -31px;}
the above one I tried but the horizontal positioning of the image wasn't possible..
Any thoughts?
drop down a comment, if this question was confused.. :)

Answer 1

I'm not positive about cross-browser support, but this at least works in Chrome 15.
http://jsfiddle.net/tkZMB/
li:hover {
background-position-y: -31px;
}
You could combine this to simplify your overall CSS too.
/* General list item declaration */
li {
width: 130px;
height: 30px;
border: 1px solid gray;
float: left;
background: url(http://i.stack.imgur.com/m5HOI.png);
}
/* For each child move menu over */
li:nth-child(2) {
background-position-x: -100px;
}
/* On hover slide the background up. */
li:hover {
background-position-y: -62px;
}

Answer 2

Sorry, just modified your code to this, though I hope this will help you to produce efficient markup (semantically-correct) and style sheet codes: hopeful that will also solve browser inconsistencies in your codes.
HTML:
<ul class="section">
<li class="home current">
Home
</li>
<li class="company">
Company
</li>
<li class="services">
Services
</li>
<li class="support">
Support
</li>
</ul>
CSS:
.section li {
display: inline;
}
.section a {
background: url(../images/nav.png) no-repeat;
display: inline-block;
}
.section .home a {
background-position: left top;
}
.section .company a {
background-position: -100px 0;
}
.section .services a {
background-position: -250px 0;
}
.section .support a {
background-position: -390px 0;
}
.section .current a {
background-position: 0 -62px;
}