本期挑战：
给定如下HTML代码
<div class="container">
<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="http://www.gbtags.com/gb/laitu/135x180&text=MY AVATAR/222222/dd4814" /></div>
<div class="follow"><button><i class="icon-plus"></i> 关注</button></div>
</div>
<ul class="profile-list">
<li class="first"><i class="fa fa-user"></i> 介绍</li>
<li class="second"><i class="fa fa-tags"></i> 动态</li>
<li class="third"><i class="fa fa-home"></i> 技能</li>
<li class="fourth"><i class="fa fa-sun-o"></i> 背景</li>
</ul>
</div>
</div>
相关CSS代码如下：
@import "//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css";
html {
background: #d7d9d9;
font-family: 'microsoft yahei' ,Arial,sans-serif;
}
*, html, body {
font-family: Open Sans;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.container {
margin: 40px auto 0;
width: 143px;
}
.profile-container {
position: relative;
width: 143px;
float: left;
}
.profile {
background: #f6f6f6;
float: left;
padding: 4px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.avatar img {
display: block;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.follow {
margin: 4px 0 0 0;
}
.follow button {
display: block;
width: 100%;
border: 0;
background: #268cde;
color: white;
padding: 7px 0;
margin: 0;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
代码挑战要求：
用户鼠标悬浮在个人头像或者关注按钮后，台阶式展示相关的菜单内容，具体请参考如下动态图片效果（点击以下图片查看动画GIF文件）：
提交方式：
录制代码编写过程或最终代码：点击开始
跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：演示地址
【强烈提醒】加入QQ群：157757552， 获奖用户及递交快递联系方式
【强烈提醒】请在个人信息中添加QQ号，方便我们联系人获得快递地址
麦客CRM
麦客CRM是轻简好用的"表单"在线信息收集和联系人管理工具。区别于传统CRM无法触及海量真实用户，麦客CRM以用户自定义"表单"（活动报名、问卷调研、登记反馈、在线订单等）收集信息，用数据分析帮助企业解决大规模联系人分层管理。辅以EDM、短信功能，帮助企业与客户产生有效联系。（www.mikecrm.com）
礼品赞助
本期礼品5份（麦客CRM礼物包：精美记事本+高级笔记本+鼠标垫+围巾） 由麦客CRM鼎力赞助！~~~
如何增加获奖机率？
最快完成奖一名： 最快保存递交“合格”代码
最佳讲解奖一名： 代码录制过程及讲解详细完整
最佳人气奖一名： 点赞（点+）的人最多
本期参与奖二名： 新人参加本挑战均有机会获取奖品
晒晒往期获奖礼物
点击这里晒晒礼物
点击“阅读原文”查看具体活动相关信息