<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
  <div class="container">
    <a class="navbar-brand fw-bold" href="javascript:void(0)">Brandly</a>
    <div class="collapse navbar-collapse show">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Home</a></li>
        <li class="nav-item dropdown bsml-dropdown">
          <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="bsmlToggle" data-bs-toggle="dropdown" aria-expanded="false">Products</a>
          <ul class="dropdown-menu" aria-labelledby="bsmlToggle">
            <li><a class="dropdown-item" href="javascript:void(0)">Dashboard</a></li>
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="javascript:void(0)">Components</a>
              <ul class="dropdown-menu dropdown-submenu-menu">
                <li><a class="dropdown-item" href="javascript:void(0)">Buttons</a></li>
                <li><a class="dropdown-item" href="javascript:void(0)">Forms</a></li>
                <li><a class="dropdown-item" href="javascript:void(0)">Modals</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="javascript:void(0)">Templates</a>
              <ul class="dropdown-menu dropdown-submenu-menu">
                <li><a class="dropdown-item" href="javascript:void(0)">Landing Page</a></li>
                <li><a class="dropdown-item" href="javascript:void(0)">Admin Panel</a></li>
              </ul>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="javascript:void(0)">Pricing</a></li>
          </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">About</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container py-5 text-muted small">Click "Products", then hover or click "Components" or "Templates" to open the nested flyout submenu.</div>

.dropdown-submenu { position: relative; }
.dropdown-submenu-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: -1px;
}
.dropdown-submenu.show > .dropdown-submenu-menu { display: block; }
@media (max-width: 991.98px) {
  .dropdown-submenu-menu { left: 0; top: auto; position: static; }
}

const dropdown = document.querySelector('.bsml-dropdown');
const submenus = Array.from(dropdown.querySelectorAll('.dropdown-submenu'));

function closeAllSubmenus(except) {
  submenus.forEach(sub => {
    if (sub !== except) sub.classList.remove('show');
  });
}

submenus.forEach(sub => {
  const toggle = sub.querySelector(':scope > .dropdown-toggle');

  // Hovering a submenu toggle opens it and closes any sibling submenu that
  // was previously open, so only one flyout is ever visible at a time.
  sub.addEventListener('mouseenter', () => {
    closeAllSubmenus(sub);
    sub.classList.add('show');
  });

  toggle.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    const isOpen = sub.classList.contains('show');
    closeAllSubmenus(sub);
    sub.classList.toggle('show', !isOpen);
  });
});

// Closing the top-level Bootstrap dropdown must also reset every submenu,
// otherwise reopening "Products" later would show a stale open flyout.
dropdown.addEventListener('hidden.bs.dropdown', () => closeAllSubmenus(null));

document.addEventListener('click', e => {
  if (!dropdown.contains(e.target)) closeAllSubmenus(null);
});