<div class="dropdown">
  <button class="btn btn-ghost dropdown-trigger" aria-expanded="false">
    Menu ▾
  </button>
  <ul class="dropdown-menu" role="menu">
    <li role="menuitem"><a href="#">Profile</a></li>
    <li role="menuitem"><a href="#">Settings</a></li>
    <li class="dropdown-divider"></li>
    <li role="menuitem"><a href="#" class="text-error">Sign out</a></li>
  </ul>
</div>

<style>
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.625rem; padding: 0.375rem; list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); opacity: 0; pointer-events: none;
  transform: translateY(-4px); transition: all 0.15s;
}
.dropdown:focus-within .dropdown-menu { opacity: 1; pointer-events: auto; transform: none; }
.dropdown-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; }
.dropdown-menu a:hover { background: var(--border); }
.dropdown-divider { height: 1px; background: var(--border); margin: 0.375rem 0; }
</style>