css可扩展菜单，底部有最后一项

Question

我有一个菜单列表，最后一个项目和最后一个项目之间的距离更大。我想要实现的是，在缩放父div的高度时，距离应该消失但是我还想在距离为0时减少图标（应该始终是项目之间的边距顶部），但是现在，我仍然坚持缩放最后一个项目与之前项目重叠的位置。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font- 
awesome/4.4.0/css/font-awesome.min.css"> 
 <div class="scale">
<ul>
  <li>
    <i class="fa fa-search"></i>
  </li>
  <li>
    <i class="fa fa-at"></i>
  </li>
  <li>
    <i class="fa fa-ban"></i>
  </li>
  <li>
    <i class="fa fa-cog"></i>
  </li>
 </ul>
</div>

这是迄今为止我得到的 codepen：css scalable menu