The Dropdown Menu Problem: Why Agents Can't Find Your Navigation

Most e-commerce sites organise their product catalogue behind dropdown menus. Hover over "Women's Clothing" and a panel appears with subcategories: dresses, tops, jackets, accessories. It works fine for humans. For AI agents, those subcategories might as well not exist.

Why the Menu Stays Hidden

Dropdown menus typically render their contents only when triggered by a :hover pseudo-class or a JavaScript mouseenter event. When an AI agent looks at the page DOM, it sees the top-level menu items but nothing underneath them. The submenu HTML either hasn't been inserted into the DOM yet, or it exists but is hidden with display: none and no programmatic way to reveal it.

Agents that control a headless browser can technically move a virtual mouse cursor over menu items. In practice, this is unreliable. The hover target might be a narrow strip of pixels. The menu might have a delay before appearing. Moving the cursor from the trigger to the submenu might cross a gap that closes the menu. These are the same frustrations humans experience with poorly-built dropdowns, except agents can't adapt on the fly the way people do.

The Mega Menu Maze

Mega menus make this worse. A large retailer might have a mega menu with 200+ links organised into columns and sections, all hidden behind a single hover. We audited one major fashion retailer where 87% of their product category links were only accessible through a mega menu. An AI agent trying to find "men's slim fit chinos" had exactly one visible link to work with: "Men's." Everything else required a hover interaction.

Some mega menus load their content dynamically from an API when triggered. This means the HTML literally does not exist anywhere on the page until the hover fires. Even inspecting the page source gives an agent nothing to work with.

Click-Based Menus Aren't Much Better

"We use click-to-open menus, so agents can just click them." We hear this often. It helps, but not as much as you'd think.

The first problem is discovery. An agent sees a navigation bar with items like "Products," "Solutions," and "Resources." Nothing in the HTML tells the agent that clicking these will reveal submenus. There's no aria-haspopup attribute, no aria-expanded state. The agent has to guess that clicking a nav item might produce more options rather than navigating to a page.

The second problem is interaction cost. If there are six top-level menu items, the agent needs to click each one, wait for the submenu to render, parse the new links, then click again to close the menu before trying the next one. For a task like "find all product categories on this site," that's a lot of clicking and waiting.

What We See on Well-Built Sites

The sites that score highest in our navigation audits share a few patterns.

Visible sitemaps or category pages. A /categories or /sitemap page that lists all sections in plain HTML. This gives agents (and search engines) a flat list of every important page on the site. It takes almost no effort to build and maintain.

ARIA attributes on menus. Using aria-haspopup="true" and aria-expanded="false/true" tells agents that a menu element has hidden content and what state it's in. These ARIA labels aren't just for screen readers; they're essential signals for AI agents too. Agents built on accessibility APIs can then interact with these menus correctly.

HTML-first menu content. The best approach: render all submenu links in the HTML, even if they're visually hidden. Structuring HTML so agents can parse it means using CSS to control visibility rather than JavaScript to control existence. An agent parsing the DOM can find and follow links that exist in HTML regardless of their visual state.

Breadcrumb navigation. Even if the main menu is tricky, breadcrumbs on every page create a crawlable hierarchy. An agent that lands on any product page can read the breadcrumbs to understand the site structure and work backwards to find related categories.

A Simple Test

Open your site in a browser and disable JavaScript. Can you still see all your navigation options? If not, AI agents probably can't either. This five-second test catches the most common navigation problems we find in audits. The fix doesn't require a redesign. It usually just means rendering menu HTML on the server and using CSS for show/hide instead of JavaScript DOM manipulation.