Image rollover list not working

Question

I have 3 image rollovers for my social icons. Here is the HTML:

<ul class="social">
    <li><a class="html5" href="#html5"></a></li>
    <li><a class="twitter" href="#twitter"></a></li>
    <li><a class="facebook" href="#facebook"></a></li>
</ul>

The CSS:

ul.social {
    list-style-type:none;
    margin:0;
    padding:0;
}

li.social {
    display:inline;
}

The rollovers function fine, it's just that the inline nav (ul="social") is failing and only showing vertically. What am I doing wrong?

Answer 1

You are using li.social, but you need .social li. You'll also want to change display: inline to display: inline-block.