JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navigation">
  <ul class="menu" role="menubar" aria-label="Menu">
    <li role="menuitem"><a href="#">A</a></li>
    <li role="menuitem"><a href="#">B</a></li>
    <li role="menuitem" aria-haspopup="true">
      <a href="#">C</a>
      <ul aria-hidden="true" role="menu" class="menu__sub">
        <li role="menuitem"><a href="#">a</a></li>
        <li role="menuitem"><a href="#">b</a></li>
      </ul>
    </li>
    <li role="menuitem" aria-haspopup="true">
      <a href="#">D</a>
      <ul aria-hidden="true" role="menu" class="menu__sub">
        <li role="menuitem"><a href="#">a</a></li>
        <li role="menuitem"><a href="#">b</a></li>
      </ul>
    </li>
  </ul>
</nav>

SCSS

.navigation{
  background: crimson;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.menu, .menu__sub{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.menu{
  display: flex;
  justify-content: space-between;
  > li{
    position: relative;
  }
  a{
    color: white;
    text-decoration: none;
  }
  [aria-haspopup] > a::after{
    content: ' ˅';  // Do this however you want it but once
  }
  &__sub{
    display: none;
    position: absolute;
    top: 24px;
    right: 0;
    width: 100px;
    background: darken(crimson, 10%);
    li{
      padding: 5px 10px;
    }
  }
}
.show{
  display: block;
}

JavaScript

/*
 * JS
 */
const dropdownMenus = document.querySelectorAll('.menu > li[aria-haspopup]');
Array.prototype.forEach.call(dropdownMenus, function(menu) {
  menu.addEventListener('click', function(e){
    const thisSubmenu = e.target.nextElementSibling;
    thisSubmenu.classList.toggle('show');
  });
});