应用不透明度为嵌套列表项使用CSS3渐出效果(Applying opacity to a neste

好吧，我不知所措完全是。我设计在顶部右侧4个社会图标的网站。当一个悬停在图标，它们增加了从1.7至1.0的不透明度，和文字的下面那条线出现。这最好通过实例证明（将图像打破，但无论）：

http://jsfiddle.net/7hZYj/

这是我已经通过使用CSS3和列表取得一个相当简单的效果：

#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;
}

问题是，如果一个悬停右下面的图片，文字反正显示出来。举例来说，如果你将鼠标悬停在图片正下方最右侧，“加入电子目录”行显示出来。我只希望它达到1.0不透明当图像悬停......这就是我想我在CSS中指定的上方。

我究竟做错了什么？

opacity离开元素那里，因为它是一个孩子li ，当你将鼠标悬停在无形的元素，你将鼠标悬停在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;
}

添加left:-9999px; 似乎解决这个问题。您可以调整的过渡，如果你不希望它自动返回到左边，当你不再徘徊，因为在此看到小提琴