Hi there,

I've created tonnes of CSS Rollovers before so usually know what I'm doing but for whatever reason it doesn't seem to be working this time around.

I'm trying to create some Social Media links using Rollover Images as the links.

This is the HTML Code:

HTML Code:
<div id="SocialMedia">
      <ul id="SocialMedia">
            <li class="FbHeaderLink"> <a class="SocialButton" href="http://facebook.com/#" title="Find us on Facebook" target="_blank">  </a>'; </li>
      </ul>
</div>
And I have applied the following CSS Styling:

Code CSS:
div#SocialMedia {
	float:right;
	padding-top:20px;
}
 
ul#SocialMedia {
	list-style-type:none;
	display:inline;
	padding: 0;
	margin: 0;
	list-style: none;
	outline: none;
	z-index: 1000;
}
 
li.FbHeaderLink {
	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
	width: 40px;
	height: 40px;
}
 
li.FbHeaderLink:Hover {
	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
	background-position: 0 -41px;
	width: 40px;
	height: 40px;
}
 
#SocialMedia li.FbHeaderLink a.SocialButton {
	width: 40px;
	height: 40px;
}

As I said, I have done this before and it works perfectly. However, this time around it doesn't seem to put the link there. The background image is there. The <li> changes background as you hover it as expected and changes back on mouseout. But the link isn't actually there even though I have styled it to be 40x40.

The result of this is that the "title" element of the link is not being displayed when you mouseover it and obviouslly, the button is doing nothing but change colour!

Any ideas why it's not working this time around? Am I blindly forgetting to do something?