<ul>
<li class="container one"><a href=""></a></li>
<li class="container two"><a href=""></a></li>
<li class="container three"><a href=""></a></li>
<li class="container four"><a href=""></a></li>
</ul>





<style type="text/css">

.container {
    width:110px;
    border:6px double #000;
    margin:174px auto;
}
.container a {
    display:block;
    width:110px;
    height:500px;
    background-image:url(images/sites.jpg);
}

.one { background-position: 0px 500px; }
.one:hover { background-position: 0px 0px; }

.two { background-position: 75px 500px; }
.two:hover { background-position: 0px 0px; }

.three { background-position: 150px 500px; }
.three:hover { background-position: 0px 0px; }

.four { background-position: 225px 500px; }
.four:hover { background-position: 0px 0px; }

</style>