Выпадающее меню

css

button,
a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 180px;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  font-size: inherit;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  color: #0000EE;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: beige;
  border: 0;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
  appearance: none;
}

button:hover,
a:hover {
  background-color: azure;
}

button:active,
a:active {
  color: #EE0000;
}

button:focus,
a:focus {
  outline-offset: -1px;
}

button {
  padding-right: calc(5px + 7px + 5px);
  background-image: url(../img/arrow-down.svg);
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 7xp auto;
  border: 0;
}

button:hover {
  background-image: url(../img/arrow-up.svg);
}

.top-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sub-menu {
  position: absolute;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.parent-item {
  position: relative;
}

.parent-item:focus-within > .sub-menu,
.parent-item:hover > .sub-menu {
  display: block;
}

.sub-menu .parent-item:focus-within > .sub-menu,
.sub-menu .parent-item:hover > .sub-menu {
  top: 0;
  left: 100%;
}

html

<ul class="top-menu">
  <li class="parent-item">
    <button type="button">Ссылка 1</button>

    <ul class="sub-menu">
      <li class="parent-item">
        <button type="button">Вложенная ссылка 1</button>
        <ul class="sub-menu">
          <li>
            <a href="#">Ссылка 1</a>
          </li>
          <li>
            <a href="#">Ссылка 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Вложенная ссылка 2</a>
      </li>
    </ul>

  </li>
  <li>
    <a href="#">Ссылка 2</a>
  </li>
  <li>
    <a href="#">Ссылка 3</a>
  </li>
</ul>