效果：

demo地址：
http://build.gzwhir.com/rnyx201312097098/web/index.shtml
html
<div class="weiboBox">
   <dl class="weibo"><a href="#" target="_blank">官方微博</a></dl>
   <dl class="weixin"><a href="javascript:void(0)">官方微信</a>
       <div class="WeixinBox">
          <div class="Box">
              <div class="pic"><img src="uploadfiles/image/temp/code_big.jpg" /></div>
              <h1 class="h1">快来扫描我吧!</h1>
              <div class="z">◆</div>
              <div class="y">◆</div>
          </div>
       </div>
   </dl>
</div>
css
.weiboBox{ border-right:1px solid #EBEBEB; padding:0 17px 0 23px; margin-top:14px; width:75px; margin:0 auto; margin-top:50px;}
.weiboBox dl{ height:19px;}
.weiboBox dl a{ padding-left:26px; display:block; height:19px;}
.weiboBox dl.weibo{ border-bottom:1px solid #EBEBEB; padding-bottom:5px; overflow:hidden;}
.weiboBox dl.weibo a{ background:url(images/Weibo_1.jpg) no-repeat left top;}
.weiboBox dl.weibo a:hover{ background:url(images/Weibo_2.jpg) no-repeat left top;}
.weiboBox dl.weixin{ padding-top:5px; position:relative; z-index:20; width:75px; height:19px;}
.weiboBox dl.weixin a{ background:url(images/Weixin_1.jpg) no-repeat left top;}
.weiboBox dl.weixin a:hover{ background:url(images/Weixin_2.jpg) no-repeat left top;}
.WeixinBox{ position:absolute; width:117px; height:147px; top:30px; left:-47px; background:#fff; display:none;}
.WeixinBox .Box{ position:relative; width:115px; height:145px; border:1px solid #EBEBEB;}
.WeixinBox img{ width:115px; height:115px;}
.WeixinBox .h1{ font-size:14px; font-family:"微软雅黑"; height:30px; line-height:30px; text-align:center; font-weight:normal;}
.WeixinBox .y,.z{position:absolute;left:51px;}
.WeixinBox .y{color:#fff;top:-11px;}/*模拟小三角*/
.WeixinBox .z{color:#EBEBEB;top:-12px;}/*模拟小三角*/
js
//微信
$(".weixin").hover(function(){
          $(this).find(".WeixinBox").stop(true,false).slideDown(300);
       },function(){
               $(this).find(".WeixinBox").hide();
});