Applying Opacity To A Nested List Item For A Fade Effect Using CSS3

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

Solution 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