Responsive Single-level Dropdown Menu With JavaScript | CSS Script

<header class="header">
  <div class="container">
    <section class="wrapper">
      <h1><a href="#" class="brand">Brand</a></h1>
      <button type="button" class="opened-menu">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>
      <div class="overlay"></div>
      <nav class="navbar">
        <button type="button" class="closed-menu">
        <img src="./asset/closed.svg" class="closed-icon" alt="closed">
        </button>
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About</a></li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Services<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Web Design</a></li>
              <li class="menu-item"><a href="#">Web Development</a></li>
              <li class="menu-item"><a href="#">Brand Marketing</a></li>
              <li class="menu-item"><a href="#">SEO and Optimizing</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Planning <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Basic Plan</a></li>
              <li class="menu-item"><a href="#">Standard Plan</a></li>
              <li class="menu-item"><a href="#">Premium Plan</a></li>
              <li class="menu-item"><a href="#">Professional Plan</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Article <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Article One</a></li>
              <li class="menu-item"><a href="#">Article Two</a></li>
              <li class="menu-item"><a href="#">Article Three</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </section>
  </div>
</header>