Как адаптировать динамичесткое меню?

.header-menu {
    display: flex;
    width: 300px;
    border: 1px solid #000;
    padding: 0;
}
.header-menu ul {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .15s, visibility .2s, transform .1s;
    position: absolute;
    z-index: 10;
}
.header-menu li {
    position: relative;
    list-style: none;
}
.header-menu li > a,
.header-menu li > span {
    color: #000;
    cursor: pointer;
    display: block;
    white-space: nowrap;
    padding: 10px 10px 12px;
    transition: color .15s;
}
.header-menu ul a,
.header-menu ul span {
    padding: 3px 12px;
}
.header-menu a:hover,
.header-menu span:hover {
    color: #3ca4e2;
}
.header-menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    top: 100%;
    left: -2px;
    background: #fff;
    min-width: 100px;
    border: 1px solid #dcdcdc;
    border-top: 0;
    padding-bottom: 6px;
    border-radius: 0 0 3px 3px;
}

<ul class="header-menu">
  <li>
    <a href="">Каталог <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 2 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 3 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 4 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 5 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 6 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <a href="">Каталог 7 <i class="fa-light fa-angle-down fa-fw"></i></a>
    <ul>
      <li><a href="">Категория 1</a></li>
      <li><a href="">Категория 2</a></li>
    </ul>
  </li>
  <li>
    <span>О нас <i class="fa-light fa-angle-down fa-fw"></i></span>
    <ul>
      <li><a href="">Сертификаты</a></li>
    </ul>
  </li>
</ul>