html - CSS滑动菜单有问题

Question

我正在尝试创建一个停靠在屏幕右上角的滑动菜单，一切似乎都正常，只是菜单没有按预期滑动。

HTML:

<nav class="social-nav">
  <ul>
    <li class="twitter"><a href="#"><img src="images/twitter-up.jpg" /> Follow us on Twitter</a></li>
    <li class="fb"><a href="#"><img src="images/fb-up.jpg" /> Like our Facebook page</a></li>
    <li class="insta"><a href="#"><img src="images/insta-up.jpg" /> Follow us on Instagram</a></li>
    <li class="mail"><a href="#"><img src="images/mail-up.jpg" /> Send us a mail</a></li>
  </ul>
</nav>  

CSS:

body {background:#efefef; margin:0; padding:0;}
.social-nav {
position:absolute; 
top:20px;
right:0;
z-index:999;
font:10px Verdana, Geneva, sans-serif;
} 
.social-nav ul {padding:0; margin:0;}
.social-nav ul li {
list-style:none;
display: block; 
margin: 1px;
width:36px;
text-decoration:none;
transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:10.5s;
}
.social-nav ul li:hover {width:200px;}
.social-nav a{color:rgba(0,0,0,0); display:block; text-decoration:none;width:36px; height:25px; padding:0 0 15px 0;}
.social-nav a:hover{color:rgba(255,255,255,1); display:block; width:200px;}
.social-nav .twitter{background:#00acee;}
.social-nav .fb{ background:#3b5999;}
.social-nav .insta{ background:#5280a4;}
.social-nav .mail a{ background:#fff; color:rgba(0,0,0,0);}
.social-nav .mail a:hover { background:#fff; color:rgba(0,0,0,0);}

Answer 1

不能评论，所以我更新了你的 fiddle ..

http://jsfiddle.net/2p6h7xq0/1/

.social-nav:hover li{  width: 200px}
.social-nav li:hover a{color:rgba(255,255,255,1); display:block; width:200px;}