Applying opacity to a nested list item for a fade

Question

Well, I'm completely at a loss. I'm designing a website with 4 social icons on the top right hand side. When one hovers over the icons, they increase from .7 to 1.0 opacity, and a line of text appears underneath. This is best demonstrated by an example (the images are broken, but no matter):

http://jsfiddle.net/7hZYj/

It's a rather simple effect which I've achieved through the use of CSS3 and lists:

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

#pageHeader .social ul li:hover ul {
        opacity: 1.0;
}

The problem is that if one hovers right below the images, the text shows up anyway. For instance, if you hover right below the image furthest to the right, the "join the e-list" line shows up. I only want it to reach 1.0 opacity when the image is hovered over...which is what I thought I specified in the CSS above.

What am I doing wrong?

Answer 1

opacity leaves the element there and since it's a child of the li, when you hover over the invisible element, you're hovering over the li.

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    left: -9999px;
}

#pageHeader .social ul li:hover ul {
    opacity: 1.0;
    left: auto;
}

Adding left:-9999px; seems to fix the issue. You can adjust the transition if you don't want it to automatically go back to the left when you are no longer hovering, as seen in this fiddle