Nested Dropdown Menu — Free HTML CSS JS Flyout Snippet

<nav class="nd-bar">
  <button class="nd-root" id="ndRoot" aria-haspopup="true" aria-expanded="false">Menu ▾</button>
  <ul class="nd-menu" id="ndMenu" role="menu"></ul>
</nav>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0b14;color:#e8e8f2;display:flex;justify-content:center;padding:80px 24px;min-height:100vh}

.nd-bar{position:relative;align-self:flex-start}
.nd-root{background:#17172a;border:1px solid #2a2a44;color:#fff;font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer}
.nd-root[aria-expanded=true]{background:#1f1f38}

.nd-menu,.nd-sub{list-style:none;position:absolute;min-width:210px;background:#15152a;border:1px solid #2a2a44;border-radius:12px;padding:6px;box-shadow:0 18px 44px -18px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:10}
.nd-menu{top:calc(100% + 8px);left:0}
.nd-menu.open{opacity:1;visibility:visible;transform:none}
.nd-sub{top:-6px;left:100%;margin-left:6px}
.nd-item{position:relative}
.nd-item.open > .nd-sub{opacity:1;visibility:visible;transform:none}

.nd-link{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:#d4d4e6;font-family:inherit;font-size:13.5px;text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer}
.nd-link:hover,.nd-link.active{background:#262647;color:#fff}
.nd-ico{width:16px;text-align:center;flex-shrink:0;opacity:.85}
.nd-caret{margin-left:auto;opacity:.6;transition:transform .15s}
.nd-item.open > .nd-link .nd-caret{transform:rotate(0)}
.nd-kbd{margin-left:auto;font-size:10.5px;color:#7a7a96;border:1px solid #33334e;border-radius:5px;padding:1px 5px}

var DATA = [
  { ico: '📄', label: 'New file', kbd: '⌘N' },
  { ico: '📁', label: 'Open recent', children: [
    { ico: '•', label: 'dashboard.tsx' }, { ico: '•', label: 'api/routes.ts' }, { ico: '•', label: 'styles.css' }
  ] },
  { ico: '🔗', label: 'Share', children: [
    { ico: '✉', label: 'Email link' },
    { ico: '👥', label: 'Invite people', children: [
      { ico: '✏', label: 'Can edit' }, { ico: '👁', label: 'Can view' }, { ico: '💬', label: 'Can comment' }
    ] }
  ] },
  { ico: '⚙', label: 'Preferences', kbd: '⌘,' },
  { ico: '🚪', label: 'Sign out' }
];

function build(items, level) {
  var ul = document.createElement('ul');
  ul.className = level === 0 ? 'nd-menu' : 'nd-sub';
  ul.setAttribute('role', 'menu');
  items.forEach(function (it) {
    var li = document.createElement('li');
    li.className = 'nd-item';
    var hasKids = it.children && it.children.length;
    li.innerHTML = '<button class="nd-link" role="menuitem"' + (hasKids ? ' aria-haspopup="true"' : '') + '>' +
      '<span class="nd-ico">' + it.ico + '</span><span>' + it.label + '</span>' +
      (hasKids ? '<span class="nd-caret">›</span>' : it.kbd ? '<span class="nd-kbd">' + it.kbd + '</span>' : '') +
      '</button>';
    if (hasKids) li.appendChild(build(it.children, level + 1));
    ul.appendChild(li);
  });
  return ul;
}

var root = document.getElementById('ndRoot');
var menu = build(DATA, 0);
document.getElementById('ndMenu').replaceWith(menu);
menu.id = 'ndMenu';

var open = false;
function setOpen(v) {
  open = v; menu.classList.toggle('open', v);
  root.setAttribute('aria-expanded', v ? 'true' : 'false');
  if (!v) closeAllSubs(menu);
}
function closeAllSubs(scope) {
  scope.querySelectorAll('.nd-item.open').forEach(function (i) { i.classList.remove('open'); });
}

root.addEventListener('click', function (e) { e.stopPropagation(); setOpen(!open); });

// Hover opens submenus; clicking a leaf closes everything.
menu.addEventListener('pointerover', function (e) {
  var li = e.target.closest('.nd-item');
  if (!li || !menu.contains(li)) return;
  // Close sibling submenus at this level, then open the hovered one if it has kids.
  var siblings = li.parentElement.children;
  Array.prototype.forEach.call(siblings, function (s) { if (s !== li) closeAllSubs(s), s.classList.remove('open'); });
  if (li.querySelector(':scope > .nd-sub')) li.classList.add('open');
});
menu.addEventListener('click', function (e) {
  var btn = e.target.closest('.nd-link');
  if (!btn) return;
  var li = btn.parentElement;
  if (li.querySelector(':scope > .nd-sub')) return;  // parent items just expand
  e.stopPropagation();
  setOpen(false);
});

document.addEventListener('click', function () { if (open) setOpen(false); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && open) setOpen(false); });