JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

<ul class="nav">
  <li class="main-nav" id="home-nav"><a href="home">home</a></li>
  <li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="food/add">add</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="food/list">list</a></li>
  <li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="articles/add">add</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="articles/list">list</a></li>
  <li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>
</body>
</html>

CSS

ul.nav {
  text-transform: uppercase;
  background: rgba(0, 0, 0, 1);
  color: white;
}

ul.nav a:link {
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.3em;
}

ul.nav,
ul.nav li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.nav li {
  padding: 0.55em;
}

.main-nav {
  font-weight: bold;
  font-family: 'Source Sans Pro Black', sans-serif;
  border-top: 1px solid white;
}

.sub-nav {
  background: rgba(255, 255, 255, 0.1);
}

.sub-nav a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sub-nav.hide {
  display: none;
}

.sub-nav.show {
  display: block
}

JavaScript

function subMenu(e) {
  alert(e.href.lastIndexOf("/"));
}

function jsDetect() {
  var subs = document.getElementsByClassName('sub-nav');
  for (var i = 0; i < subs.length; ++i) {
    var item = subs[i];
    item.classList.add('hide');
  }
  const divs = document.querySelectorAll('.sub-link');
  divs.forEach(el => el.addEventListener('click', function(r) {
    r.preventDefault();
    subMenu(el);
  }), false);
}
window.onload = jsDetect;