# Nested dropdown menu > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The menubar of a design-tool ("Ferro") over a dotted canvas: File, Edit, Arrange, Help. Menus open on click, 236px wide, 32px items with a 14px check/radio gutter, a label, and a right-aligned shortcut column in the system mono. The Edit menu has three levels: Paste special ▸ Paste properties ▸ Fill only. Submenus open on hover after 120ms; if the pointer is heading diagonally toward an open submenu, other items wait 300ms before stealing it (a safe triangle between the previous pointer position and the submenu's left edge). Check items (Show rulers, Snap to grid, Pixel grid), a radio group (Zoom 50/100/200 %), disabled items and separators are all present. Keyboard does everything: arrows, Home/End, Right/Left for submenus, Esc per level, Enter/Space, Tab to close, and typeahead. Cool graphite, one sky-blue highlight. ## Reference behaviour 1. Initial state: the **Edit** menu is open beneath its menubar button (button highlighted `--panel-2`), showing 20 rows: Undo move ⌘Z · Redo (disabled) ⇧⌘Z · — · Cut · Copy · Paste · Paste special ▸ · Duplicate · Delete ⌫ · — · Select all ⌘A · Select same ▸ · — · VIEW heading · ✓ Show rulers ⇧R · ✓ Snap to grid · Pixel grid ⌘' · — · ZOOM heading · 50 % · ● 100 % ⌘0 · 200 % · — · Preferences… ⌘,. The status line top-right reads "Last action: —". 2. Hover an item: it fills `--accent` with `--accent-ink` text; the shortcut goes 80% opaque dark. Focus follows hover. 3. Hover "Paste special": after 120ms its submenu opens to the right (`left: calc(100% − 4px); top: −6px`) with a 120ms pop (opacity 0 → 1, `scale(.98) translateY(−2px)` → none). The parent item stays highlighted while the submenu is open. 4. Move the pointer diagonally from "Paste special" down-right toward the submenu, crossing "Duplicate": Duplicate does **not** take the highlight for 300ms because the pointer is inside the triangle (previous pointer position, submenu top-left, submenu bottom-left). Moving straight down onto Duplicate (outside the triangle) switches immediately and closes the submenu. 5. Hover "Paste properties" inside the submenu: a third-level menu opens the same way. Hovering another item in the second level closes the third level. 6. Click "Show rulers": its check toggles (`aria-checked`), the status line reads "Edit › Show rulers (off)", and the menu **stays open** (check/radio items don't dismiss). Click "200 %": the radio moves, status "Edit › 200 % (on)", menu stays open. 7. Click "Copy": status "Edit › Copy"; the menu closes and focus returns to the Edit button. Click "Fill only" (third level): status "Edit › Paste special › Paste properties › Fill only" and everything closes. 8. With a menu open, hovering another menubar button (File, Arrange, Help) switches to that menu without a click. Clicking the open menu's button closes it. Clicking anywhere outside the bar closes. 9. Keyboard, on a menubar button: ↓ / Enter / Space opens the menu and focuses its first item; → / ← move between buttons (and switch open menus if one is open). 10. Keyboard, in a menu: ↓ ↑ move with wrap; Home / End; → on an item with a submenu opens it and focuses its first item (→ on a plain item in a top-level menu switches to the next menubar menu); ← closes the current submenu and refocuses its parent item (← in a top-level menu switches to the previous menubar menu); Esc closes one level (submenu → parent item; top-level → menubar button); Enter / Space activate; Tab closes everything and continues; typing letters jumps to the next item whose label starts with the buffered prefix (700ms buffer). 11. Disabled items (Redo, Print) don't highlight on hover and don't activate, but they are still focusable via keyboard so their shortcut can be read. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────┐ │ FERRO File [Edit] Arrange Help Onboarding flow v3 · Saved │ bar 44 ├──────────┬─────────────────────┬─────────────────────────────────────────┤ │ │ Undo move ⌘Z │ Last action: — │ menu 236 wide │ canvas │ Redo ⇧⌘Z │ (disabled) │ items 32 │ dotted │ ─────────────────── │ │ padding 6 │ 20px │ Cut ⌘X │ │ │ grid │ Copy ⌘C │ │ │ │ Paste ⌘V │ │ │ │ Paste special ▸ ├───────────────────────┐ │ submenu: left 100%−4, top −6 │ │ Duplicate ⌘D │ Paste to replace ⇧⌘R │ │ │ │ Delete ⌫ │ Paste over selection │ │ │ │ ─────────────────── │ Paste as plain … ⇧⌥⌘V│ │ │ │ Select all ⌘A │ ───────────────────── │ │ │ │ Select same ▸ │ Paste properties ▸ ├──────────────┐ │ third level │ │ ─────────────────── └───────────────────────┤ Fill only │ │ │ │ VIEW │ Stroke only │ │ │ │ ✓ Show rulers ⇧R │ Effects only │ │ │ │ … └──────────────┘ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` - `