JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <nav id="navbar" class="nav">
    <ul>
      <li><a href="#concreteMix">Бетон</a></li>
      <li><a href="#concreteMix">Евроцемент</a></li>
      <li><a href="#concreteMix">Песок строительный</a></li>
      <li><a href="#concreteMix">Щебень гранитный</a></li>
      <li><a href="#salesRent">Продажа оборудования</a></li>
      <li><a href="#salesRent">Аренда оборудования</a></li>
      <li><a href="#construct">Строительство</a></li>
      <li> <a href="#construct">Аренда техники</a></li>

    </ul>
  </nav>
</body>

CSS

.nav {
      min-height: 50px;
    background: #51514d; 
  margin: 0 auto;
  position: relative;
  z-index: 10;
  //background-image: url(img/menuhamham.png);
  background-repeat: no-repeat;
  background-position: 50%;
}

.nav ul {
  position: absolute;
  flex-direction: column;
  width: 100%;
}

.nav li {
  display: none;
  margin: 0;
  background-color: #000;
  width: 100%;
  position: relative;
  left: 0px;
}

.nav:hover li {
  //display: block;
  //padding: 10px;
}

JavaScript

document.querySelector('.nav').onclick = function() {
   var elems = document.querySelectorAll('.nav li');
   console.log(elems);
   for (var i = 0; i < elems.length; i++) {
     elem = elems[i];
     if (elem.style.display === 'none') {
       elem.style.display = 'block';
     } else {
     	 elem.style.display = 'none';
     }
     
   };
 }