css sprite images showing but a:link urls not showing when I hover over the images

Question

My CSS sprite images show just fine on website and sprite image changes with hover, but link URLs are not working when I hover over the images. Not sure what I am doing wrong but I'm sure it is probably something simple.

The URL of the website is the following:

www.roadworksmfg.com

The icons in question are on the left hand side in the sidebar directly under the red catalog search button.

Here is my CSS block for these sprite buttons:

li.facebook-icon, li.twitter-icon{
float: left;
display: block;
margin: 0px 21px;
width: 48px;
height: 48px;
background: url(/images/sprites/facebook_twiter_sprite_sheet.png) no-repeat;
}

li.facebook-icon{
background-position: 0 0;
}

li.facebook-icon:hover{
background-position: 0 -48px ;
}

li.twitter-icon{
background-position: 0 -96px ;
}

li.twitter-icon:hover{
background-position: 0 -144px ;
}

Here is my HTML block:

<ul class="social-icons mobile-social-set">
    <li class="facebook-icon"><a href="http://www.facebook.com/roadworks.manufacturing?ref=tn_tnmn"></a></li>

    <li class="twitter-icon"><a href="http://www.twitter.com/RoadWorksmfg"></a></li>
</ul>

By the way, please forgive me if I have formatted any of this question incorrectly. This is my first post and question on Stackoverflow.

Answer 1

Your a element is empty.

Add this to your css

.social-icons a {
display: block;
height: 100%;
}