JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="header__main-menu">
  <ul class="main-menu__list">
    <li class="menu-item">
      <a href="#">Services1</a>
      <button class="toggle-btn">+</button>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">услуга1</a></li>
        <li class="menu-item"><a href="#">услуга2</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Services2</a>
      <button class="toggle-btn">+</button>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">услуга1</a></li>
        <li class="menu-item"><a href="#">услуга2</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">Services3</a></li>
    <li class="menu-item"><a href="#">Services4</a></li>
  </ul>
</nav>

CSS

.header__main-menu {
  font-family: Arial, sans-serif;
}

.main-menu__list {
  list-style-type: none;
  padding: 0;
}

.menu-item {
  margin: 10px 0;
  position: relative;
}

.sub-menu {
  display: none;
  list-style-type: none;
  padding-left: 20px;
}

.toggle-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
}

.menu-item .toggle-btn:focus {
  outline: none;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const mainMenu = document.querySelector('.main-menu__list');

  mainMenu.addEventListener('click', function (e) {
    if (e.target && e.target.classList.contains('toggle-btn')) {
      const submenu = e.target.nextElementSibling;
      if (submenu && submenu.classList.contains('sub-menu')) {
        if (submenu.style.display === 'block') {
          submenu.style.display = 'none';
          e.target.textContent = '+';
        } else {
          submenu.style.display = 'block';
          e.target.textContent = '-';
        }
      }
    }
  });
});