<style>
  ul.drop1{
      display           : inline-block;
      position          : relative;
      list-style-type   : none;
      width             : 100px;
      padding           : 0px;
      margin-left       : 10px;
  }
  ul.drop1 li{
      position          : absolute;
      cursor            : pointer;
      top               : 0px;
      left              : 0px;
      box-sizing        : content-box;
      width             : 100px;
      height            : 35px;
      line-height       : 35px;
      text-align        : center;
      border            : 1px solid #BBB;
      background-color  : #FDF;
      transition        : top 0.7s, background-color 0s;
  }
  ul.drop1 li:hover{
      background-color  : #FFD;
  }
  ul.drop1 li.category{
      position          : relative;
      z-index           : 10;
      background-color  : #DFF;
  }
  ul.drop1 li.category1{
      z-index           : 4;
  }
  ul.drop1 li.category2{
      z-index           : 3;
  }
  ul.drop1 li.category3{
      z-index           : 2;
  }
  ul.drop1 li.category4{
      z-index           : 1;
  }
  ul.drop1:hover li.category1{
      top               : 35px;
  }
  ul.drop1:hover li.category2{
      top               : 70px;
  }
  ul.drop1:hover li.category3{
      top               : 105px;
  }
  ul.drop1:hover li.category4{
      top               : 140px;
  }
</style>