CSS Sprite - clickable <a> within <li>

Question

I used an online Sprite Generator to create the html, css, and PNG. Having trouble implementing the suggested code.

my original html

        <div class="main">
            <div id="mi-slider" class="mi-slider">
                <ul>
                    <li><a href="#"><img src="images/1.jpg" alt="img01" width="165" height="165"><h2>Boots</h2></a></li>
                    <li><a href="#"><img src="images/2.jpg" alt="img02" width="165" height="165"><h2>Shoes</h2></a></li>
                    <li><a href="#"><img src="images/3.jpg" alt="img03" width="165" height="165"><h2>Clogs</h2></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="images/5.jpg" alt="img05" width="165" height="165"><h2>Belts</h2></a></li>
                    <li><a href="#"><img src="images/6.jpg" alt="img06" width="165" height="165"><h2>Hats &amp; Caps</h2></a></li>
                    <li><a href="#"><img src="images/7.jpg" alt="img07" width="165" height="165"><h2>Sunglasses</h2></a></li>
                    <li><a href="#"><img src="images/8.jpg" alt="img08" width="165" height="165"><h2>Scarves</h2></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="images/9.jpg" alt="img09" width="165" height="165"><h2>Casual</h2></a></li>
                    <li><a href="#"><img src="images/10.jpg" alt="img10" width="165" height="165"><h2>Luxury</h2></a></li>
                    <li><a href="#"><img src="images/11.jpg" alt="img11" width="165" height="165"><h2>Sport</h2></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="images/12.jpg" alt="img12" width="165" height="165"><h2>Carry-Ons</h2></a></li>
                    <li><a href="#"><img src="images/13.jpg" alt="img13" width="165" height="165"><h2>Duffel Bags</h2></a></li>
                    <li><a href="#"><img src="images/14.jpg" alt="img14" width="165" height="165"><h2>Laptop Bags</h2></a></li>
                    <li><a href="#"><img src="images/15.jpg" alt="img15" width="165" height="165"><h2>Briefcases</h2></a></li>
                </ul>
                <nav>
                    <a href="#">Test1</a>
                    <a href="#">Test2</a>
                    <a href="#">Test3</a>
                    <a href="#">Test4</a>
                </nav>
            </div>
        </div>

generated css

.sprite {background:url('../images/sprite.png') no-repeat top left; width: 165px; height: 165px;} 
.sprite.1 {background-position:0px 0px;} 
.sprite.2 {background-position:0px -175px;} 
.sprite.3 {background-position:0px -350px;} 
.sprite.4 {background-position:0px -525px;} 
.sprite.5 {background-position:0px -700px;} 
.sprite.6 {background-position:0px -875px;} 
.sprite.7 {background-position:0px -1050px;} 
.sprite.8 {background-position:0px -1225px;} 
.sprite.9 {background-position:0px -1400px;} 
.sprite.10 {background-position:0px -1575px;} 
.sprite.11 {background-position:0px -1750px;} 
.sprite.12 {background-position:0px -1925px;} 
.sprite.13 {background-position:0px -2100px;} 
.sprite.14 {background-position:0px -2275px;} 
.sprite.15 {background-position:0px -2450px;}

generated html

<div class='sprite 1'></div>
<div class='sprite 2'></div>
<div class='sprite 3'></div>
<div class='sprite 4'></div>
<div class='sprite 5'></div>
<div class='sprite 6'></div>
<div class='sprite 7'></div>
<div class='sprite 8'></div>
<div class='sprite 9'></div>
<div class='sprite 10'></div>
<div class='sprite 11'></div>
<div class='sprite 12'></div>
<div class='sprite 13'></div>
<div class='sprite 14'></div>
<div class='sprite 15'></div>

The best I can do is return the first image and it returns sprite 1 for all three of the images.

<ul>
 <li><a href="#"><div class="sprite 1"></div><h2>Boots</h2></a></li>
 <li><a href="#"><div class="sprite 2"></div><h2>Shoes</h2></a></li>
 <li><a href="#"><div class="sprite 3"></div><h2>Clogs</h2></a></li>
</ul>

Answer 1

The problem is that classes cannot start with numbers

use

<ul>
    <li><a href="#"><div class="sprite sprite-1"></div><h2>Boots</h2></a></li>
    <li><a href="#"><div class="sprite sprite-2"></div><h2>Shoes</h2></a></li>
    <li><a href="#"><div class="sprite sprite-3"></div><h2>Clogs</h2></a></li>
</ul>

and

.sprite {background:url('../images/sprite.png') no-repeat top left; width: 165px; height: 165px;} 
.sprite.sprite-1 {background-position:0px 0px;} 
.sprite.sprite-2 {background-position:0px -175px;} 
.sprite.sprite-3 {background-position:0px -350px;} 

Demo:

.sprite {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}

.sprite.sprite-1 {
  background: red;
}

.sprite.sprite-2 {
  background: green;
}

.sprite.sprite-3 {
  background: blue;
}

<div class="sprite sprite-1"></div>
<div class="sprite sprite-2"></div>
<div class="sprite sprite-3"></div>