Could someone please review this segment of the CSS to ensure its accuracy?
CSS
#nav-list {
list-style-type: none;
background-repeat: no-repeat;
background-image:url("../_img/Footersprite.png")
}
#nav-list li, #nav-footer a {
height: 40px;
display: block;
}
#nav-list li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#nav-list-why-repair-01 { width: 98px; }
#nav-list-savings-02 { width: 131px; }
#nav-list-enviromental-03 { width: 123px; }
#nav-advantage-04 { width: 138px; }
#nav-list-why-repair-01 a:hover { background:url(./_img/Footersprite.png) 0px -40px no-repeat; }
#nav-list-savings-02 a:hover { background:url(./_img/Footersprite.png) -98px -40px no-repeat; }
#nav-list-enviromental-03 a:hover { background:url(./_img/Footersprite.png) -229px -40px no-repeat; }
#nav-list-advantage-04 a:hover { background:url(./_img/Footersprite.png) -352px -40px no-repeat; }
HTML
<ul id="nav-footer"
<a class="whyroofrepair" href="/why-roof-repair.html">Why Roof Repair?</a>
<a class="Savings" href="/savings.html">Savings</a>
<a class="EnvironmentalBenefits" href="/environmental-benefits.html">Environmental Benefits</a>
<a class="RoofRxAdvantage" href="/roof-rx-advantage.html">Roof Rx Advantage</a>
</ul>
I require assistance with the HTML. Can anyone offer advice on how to rephrase this correctly without altering the provided CSS assuming it is correct?