<div class="widget_wrap">
  <style>
    body {
      position: relative
    }

    .widget_wrap {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      padding: 10px 20px;
      background: #222;
      border-bottom-right-radius: 10px;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
      transform: translate(-100%, 0)
    }

    .widget_wrap:after {
      content: " ";
      position: absolute;
      top: 0;
      left: 100%;
      width: 24px;
      height: 24px;
      background: #222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRF////////AAAA////BQBkwgAAAAN0Uk5TxMMAjAd+zwAAACNJREFUCNdjqP///y/DfyBg+LVq1Xoo8W8/CkFYAmwA0Kg/AFcANT5fe7l4AAAAAElFTkSuQmCC) no-repeat 50% 50%;
      cursor: pointer
    }

    .widget_wrap:hover {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0)
    }

    .widget_item {
      padding: 0 0 10px
    }

    .widget_link {
      color: #fff;
      text-decoration: none;
      font-size: 15px;
    }

    .widget_link:hover {
      text-decoration: underline
    }
  </style>
  <ul class="widget_list">
    <li class="widget_item"><a class="widget_link" href="index.html">index</a></li>
    <li class="widget_item"><a class="widget_link" href="product-card.html">product-card</a></li>
    <li class="widget_item"><a class="widget_link" href="compare.html">compare</a></li>
    <li class="widget_item"><a class="widget_link" href="popup-page.html">popup-page</a></li>
    <li class="widget_item"><a class="widget_link" href="basket.html">basket</a></li>
    <li class="widget_item"><a class="widget_link" href="basket-step2.html">basket-step2</a></li>
    <li class="widget_item"><a class="widget_link" href="basket-step3.html">basket-step3</a></li>
    <li class="widget_item"><a class="widget_link" href="basket-step4.html">basket-step4</a></li>
    <li class="widget_item"><a class="widget_link" href="basket-step5.html">basket-step5</a></li>
    <li class="widget_item"><a class="widget_link" href="about-us.html">about-us</a></li>
    <li class="widget_item"><a class="widget_link" href="account-1.html">account-1</a></li>
    <li class="widget_item"><a class="widget_link" href="account-2.html">account-2</a></li>
    <li class="widget_item"><a class="widget_link" href="account-3.html">account-3</a></li>
    <li class="widget_item"><a class="widget_link" href="account-4.html">account-4</a></li>
    <li class="widget_item"><a class="widget_link" href="account-5.html">account-5</a></li>
    <li class="widget_item"><a class="widget_link" href="contacts.html">contacts</a></li>
    <li class="widget_item"><a class="widget_link" href="text-page1.html">text-page1</a></li>
    <li class="widget_item"><a class="widget_link" href="text-page2.html">text-page2</a></li>
  </ul>
</div>