I'm updating an old site and the menu is done with css rollover sprites- a different one for each menu item. The issue is that is is not responsive, of course. I've been googling for ways to do a responsive sprite menu with no real help the last few days (including a site search here, so if I missed an existing answer, sorry). I have to keep the rollovers in the menu since it's very important to the client to have them. How do I do this?

Here is the old menu, circa 2009. It was obviously not any sort of best practice setup then, but I cannot figure out how to update it to be responsive or even how to do a responsive sprite menu from scratch. Seems not many use unique rollovers for anything anymore, but I have to have them. Any help would be really appreciated.
https://dl.dropboxusercontent.com/u/...lates/nav.html
Code:
<style>
body {
	background-color:#000;
}
#nav {
	overflow:hidden;
	width:auto;
	margin:0;
/*	padding:10px 25px 5px 25px;*/
	text-align:center;
	background:url(../images/menu_background.jpg) repeat;
} 
ul#topnav {
	margin: 0; padding: 0;
	padding-left:25px;
	list-style: none;
	float: left;
	width:auto;
	font-size:10px;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	width:95px;
}
ul#topnav a {
	float: left;
	display: block;
	height: 95px;
	background-position: left top;
	color:#fff;
	text-indent: -99999px;
	overflow:hidden;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left -95px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.lackkonservering a {
	background-image: url(../images/button_ditec.jpg);
	width: 95px;
}
ul#topnav li.protec a {
	background-image: url(../images/button_protec.jpg);
	width: 95px;
}
ul#topnav li.glastec a {
	background-image: url(../images/button_glastec.jpg);
	width: 95px;
}
ul#topnav li.falgbehandling a {
	background-image: url(../images/button_falg.jpg);
	width: 95px;
}
ul#topnav li.lackskydd a {
	background-image: url(../images/button_lack.jpg);
	width: 95px;
}
ul#topnav li.drheadlamp a {
	background-image: url(../images/button_drhead.jpg);
	width: 95px;
}
ul#topnav li.tvattservice a {
	background-image: url(../images/button_tvatt.jpg);
	width: 95px;
}
ul#topnav li.rekonditionering a {
	background-image: url(../images/button_rekond.jpg);
	width: 95px;
}
ul#topnav li.solfilm a {
	background-image: url(../images/button_solfilm.jpg);
	width: 95px;
}
ul#topnav li.ovriga a {
	background-image: url(../images/button_ovrigt.jpg);
	width: 95px;
}
#lackkonservering li.lackkonservering a,
#protec li.protec a,
#services li.glastec a,
#portfolio li.falgbehandling a,
#contact li.lackskydd a,
#blog li.drheadlamp a
#blog li.tvattservice a
#blog li.rekonditionering a
#blog li.solfilm a
#blog li.ovriga a
{
	background-position: left bottom;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#navtext {
	margin: 0; padding: 0;
	width:auto;
	background:url(../images/menu_background.jpg) repeat;
	text-align:left;
	padding-bottom:5px;
}
.navlack {
	float:left;
	overflow:hidden;
	width:100px;
	padding-left:20px;
	font-size:11px;
	text-align:center;
	color:#fff;
}
.navprotec {
	float:left;
	overflow:hidden;
	width:95px;
	padding-left:0;
	padding-top:5px;
	font-size:11px;
	text-align:center;
	color:#fff;
}
</style>
Code:
<div id="nav">
	<ul id="topnav">
    <li class="lackkonservering"><a href="../lackkonservering.html" title="Ditec&reg; Lackkonservering">Ditec&reg; lackkonservering</a></li>
	<li class="protec"><a href="../protec.html" title="Protec&reg;">Protec&reg;</a></li>
	<li class="glastec"><a href="../glastec.html" title="Glastec&reg;">Glastec&reg;</a></li>
	<li class="falgbehandling"><a href="../falgbehandling.html" title="F&auml;lgbehandling">F&auml;lgbehandling</a></li>
	<li class="lackskydd"><a href="../lackskydd.html" title="Lackskydd">Lackskydd</a></li>
	<li class="drheadlamp"><a href="../drheadlamp.html" title="Dr Headlamp">Dr Headlamp</a></li>
   	<li class="tvattservice"><a href="../tvattservice.html" title="Tv&auml;ttservice">Tv&auml;ttservice</a></li>
    <li class="rekonditionering"><a href="../rekonditionering.html" title="Rekonditionering">Rekonditionering</a></li>
    <li class="solfilm"><a href="../solfilm.html" title="Solfilm">Solfilm</a></li>
    <li class="ovriga"><a href="../ovriga.html" title="&Ouml;vriga tj&auml;nster">&Ouml;vriga tj&auml;nster</a></li>
	</ul>
	<div class="clearfloat"></div>
    <div id="navtext">
  
    <div class="navlack">Ditec&reg; Lackkonservering</div>
    <div class="navprotec">Protec&reg;</div>
    <div class="navprotec">Glastec&reg;</div>
    <div class="navprotec">F&auml;lgbehandling</div>
    <div class="navprotec">Lackskydd</div>
    <div class="navprotec">Dr Headlamp</div>
    <div class="navprotec">Tv&auml;ttservice</div>
    <div class="navprotec">Rekonditionering</div>
    <div class="navprotec">Solfilm</div>
    <div class="navprotec">&Ouml;vriga tj&auml;nster</div>
<div class="clearfloat"></div>
  </div>
  </div>