Add a menu item and drag it slightly right of the one above in Appearance → Menus — that makes it a child, and the parent becomes a dropdown.
On the desktop bar
A top-level item with children gets a faint ▾ after its label. The panel opens on hover, and on keyboard focus — tabbing into the parent link opens it, so the menu is usable without a mouse and without JavaScript. There is no script behind any of this; it is two CSS rules.
The panel is:
- 160px wide, left-aligned under its parent
- drawn on the header background colour, so it inherits the skin
- outlined with the header hairline, with a rule between each item
A third level opens to the right of the second, not below it.
Depth
The menu renders four levels. Use two. A dropdown you have to keep the pointer inside while travelling sideways to reach a fly-out is a coordination test, and on a trackpad most people fail it. If a section genuinely has three levels of structure, give it a landing page and put the structure on the page, where there is room for it.
Nothing opens on touch
A dropdown that opens on hover cannot open on a touchscreen — there is no hover state for a finger. This is why the theme sends the whole menu into the mobile drawer below the tablet width instead of trying to make the bar work with taps.
Watch for the in-between case: a tablet in landscape is above the breakpoint and has no hover. If your audience is heavily on tablets, keep the top-level items linkable to real pages rather than using them purely as dropdown labels.
Making a parent unclickable
Add the parent as a Custom Link with # as its URL. It then exists only to open the panel. Do it sparingly, and never on a touch-heavy site, for the reason above.
In the drawer
On a phone the same menu is printed stacked, with each sub-menu indented under its parent and always visible. Nothing collapses, nothing has to be tapped open. A long menu makes for a long scroll, which is a fair trade against a reader who cannot find the third item.