<ul class="accordion-menu">
  <li class="accordion-menu__item" id="item-1">
    <a href="#item-1" class="accrodion-menu__link"><svg t="1580188452851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4143" width="20" height="20"><path d="M555.541333 117.994667l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H640V746.666667c0-70.688-57.312-128-128-128s-128 57.312-128 128v170.666666H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0z" p-id="4144" fill="#ffffff"></path></svg>Item 1<svg t="1580188559675" class="icon chevron" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="616" width="30" height="30"><path d="M316.16 366.08 512 561.92 707.84 366.08 768 426.666667 512 682.666667 256 426.666667 316.16 366.08Z" p-id="617" fill="#ffffff"></path></svg></a>
    <ul class="accordion-menu__submenu">
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a></li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li class="accordion-menu__item" id="item-2">
    <a href="#item-2" class="accrodion-menu__link"><svg t="1580188087348" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3111" width="20" height="20"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m149.162667 222.901334L444.16 386.357333a96 96 0 0 0-57.802667 57.813334l-78.122666 216.992a42.666667 42.666667 0 0 0 54.602666 54.602666l217.002667-78.122666a96 96 0 0 0 57.802667-57.813334l78.122666-216.992a42.666667 42.666667 0 0 0-54.602666-54.602666zM512 565.333333a53.333333 53.333333 0 1 0 0-106.666666 53.333333 53.333333 0 0 0 0 106.666666z" p-id="3112" fill="#ffffff"></path></svg>Item 2<svg t="1580188559675" class="icon chevron" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="616" width="30" height="30"><path d="M316.16 366.08 512 561.92 707.84 366.08 768 426.666667 512 682.666667 256 426.666667 316.16 366.08Z" p-id="617" fill="#ffffff"></path></svg></a>
    <ul class="accordion-menu__submenu">
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a></li>
    </ul>
  </li>
  <li class="accordion-menu__item" id="item-3">
    <a href="#item-3" class="accrodion-menu__link"><svg t="1580188479746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4425" width="20" height="20"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="4426" fill="#ffffff"></path></svg>Item 3<svg t="1580188559675" class="icon chevron" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="616" width="30" height="30"><path d="M316.16 366.08 512 561.92 707.84 366.08 768 426.666667 512 682.666667 256 426.666667 316.16 366.08Z" p-id="617" fill="#ffffff"></path></svg></a>
    <ul class="accordion-menu__submenu">
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
  <li class="accordion-menu__item" id="item-4">
    <a href="#item-4" class="accrodion-menu__link"><svg t="1580188513334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4707" width="20" height="20"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 586.666667a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m-2.517333-373.333333c-48.416 0-92.746667 24.16-118.613334 63.413333a137.088 137.088 0 0 0-15.978666 33.237333 32 32 0 0 0 60.906666 19.690667c2.016-6.24 4.885333-12.202667 8.522667-17.717333C458.4 375.914667 482.709333 362.666667 509.482667 362.666667 552.277333 362.666667 586.666667 396.266667 586.666667 437.333333s-34.4 74.666667-77.194667 74.666667a32 32 0 0 0-32 32v64a32 32 0 0 0 64 0v-35.584C603.946667 558.197333 650.666667 503.232 650.666667 437.333333c0-76.757333-63.381333-138.666667-141.194667-138.666666z" p-id="4708" fill="#ffffff"></path></svg>Item 4<svg t="1580188559675" class="icon chevron" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="616" width="30" height="30"><path d="M316.16 366.08 512 561.92 707.84 366.08 768 426.666667 512 682.666667 256 426.666667 316.16 366.08Z" p-id="617" fill="#ffffff"></path></svg></a>
  </li>
</ul>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #ECEFFC;
}

.accordion-menu {
  width: 300px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  list-style-type: none;

  .accordion-menu__item {

    .accrodion-menu__link {
      position: relative;
      display: block;
      padding: 16px 20px;
      font-family: Lato, sans-serif;
      text-decoration: none;
      color: white;
      background: #3498db;
      transition: 0.5s;

      svg {
        margin: 0 10px -2px 0;

        &.chevron {
          position: absolute;
          top: 16px;
          right: 10px;
          color: white;
          transition: 0.5s;
        }
      }

      // arrow
      &:not(:last-child)::before {
        position: absolute;
        content: "";
        bottom: -7px;
        left: 20px;
        width: 15px;
        height: 15px;
        background: inherit;
        transform: rotate(45deg);
      }
    }

    .accordion-menu__submenu {
      max-height: 0;
      padding: 0;
      background: #333;
      overflow: hidden;
      list-style-type: none;
      transition: 0.5s;

      a {
        display: block;
        padding: 1em 2em;
        color: white;
        text-decoration: none;
        font-size: 14px;
        transition: 0.5s;

        &:hover {
          background: #2980b9;
        }
      }
    }

    &:target {
      .accrodion-menu__link svg.chevron {
        transform: rotate(0.5turn);
      }

      .accordion-menu__submenu {
        max-height: 10em;
      }
    }
  }
}