<nav class="navbar">
  <ul class="menu">
    <li class="dropdown">
      <span class="dropdown-toggle">Menu 1</span>
      <ul class="dropdown-menu">
      </ul>
    </li>
    <li class="dropdown">
      <span class="dropdown-toggle">Menu 2</span>
      <ul class="dropdown-menu">
      </ul>
    </li>
    <li class="dropdown">
      <span class="dropdown-toggle">Menu 3</span>
      <ul class="dropdown-menu">
      </ul>
    </li>
    <li class="dropdown">
      <span class="dropdown-toggle">Menu 4</span>
      <ul class="dropdown-menu">
      </ul>
    </li>
  </ul>
</nav>

.navbar {
  background-color: #333;
  padding: 10px 20px;
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;

    .dropdown {
      position: relative;

      .dropdown-toggle {
        color: #fff;
        padding: 10px;
        cursor: pointer;
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #333;
        min-width: 160px;
        z-index: 1;

        li {
          &:hover {
            background-color: #444;
          }

          a {
            display: block;
            color: #fff;
            padding: 10px;
            text-decoration: none;
          }
        }
      }
    }
  }
}

//Inserting some random links
let dropdownMenus = document.querySelectorAll('.dropdown-menu');
dropdownMenus.forEach(function (menu) {
    for (let i = 1; i <= Math.floor(Math.random() * 2) + 4; i++) {
      let link = document.createElement('li');
      link.innerHTML = `<a href="#">Link ${i}</a>`;
      menu.appendChild(link);
    }
  });

//Navbar interaction using Event Delegation
document.querySelector('.menu').addEventListener('click', function (event) {
    let target = event.target;
    if (target.classList.contains('dropdown-toggle')) {
      let dropdown = target.nextElementSibling; 
      dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
    }
  });