◦ Comprehensive security
◦ 24/7 support
WordPress Guide → Build → DropDown Menu
How to create a drop down menu in WordPress
A clean, organized menu can make or break the user experience. Drop down menus let you display more links without cluttering your site’s header, keeping navigation clear and professional.
If you’ve never customized menus in WordPress before, don’t worry—we’ll walk you through exactly how to create a drop down menu, style it, preview it, and fix common issues.
Get fast, reliable hosting for WordPress
Power your site with the industry’s fastest, most optimized WordPress hosting
What is a drop down menu in WordPress?
A drop down menu is a navigation element where one main item (called a parent) reveals additional links (child items) underneath it. It usually appears in your site’s main menu bar, and you’ll often see it used for:
- Grouping related pages (like “Services” with multiple sub-services)
- Categorizing blog content
- Organizing product collections on an ecommerce site
WordPress lets you build drop downs with built-in features, so there’s no coding required.
Where WordPress menus live (and how to access them)
Before you can create or edit a menu, you need to know where to look. There are two main places to manage menus:
- Go to Appearance > Menus in the WordPress dashboard
- Or use the Customizer at Appearance > Customize > Menus
You might also see menus inside Appearance > Editor if you’re using a block theme (more on that later).
Each theme has different menu “locations.” For example, some have a single menu for the header, while others offer multiple options like top bar, footer, or mobile-specific menus. You can assign your menu to any location your theme supports.
How to create a new menu
To start fresh with a new menu:
- In the WordPress dashboard, go to Appearance > Menus.
- Click the create a new menu link at the top of the page.
- Enter a name for your menu. This name won’t show on the site—it’s just for your reference.
- Select a Display location like “Primary Menu” or “Header.”
- Click Create Menu.
If your theme supports multiple menu locations, you can assign your menu to more than one spot.
How to add and nest items in your drop down menu
Once your menu is created, you can start building your navigation.
- On the left, choose the type of items you want to add: Pages, Posts, Custom Links, or Categories.
- Check the boxes next to the items you want, then click Add to Menu.
- Drag and drop the items into the order you want.
- To make a drop down, drag a menu item slightly to the right under a parent item. It will be indented to show it’s a sub-item.
- Save your menu.
Example:
- About Us (parent)
- Our Team (child)
- Mission & Values (child)
You can nest multiple levels, but two is usually enough to avoid confusing your visitors.
Customizing the look of your drop down menu
Most themes style drop down menus automatically. But if your theme doesn’t—or you want to customize how it looks—you have a few options:
- Switch to a theme that includes drop down support out of the box.
- Add custom CSS to tweak font sizes, colors, or spacing.
- Use a plugin like Max Mega Menu for advanced design options.
Sample CSS snippet:
To change the background color of your drop down items:
.sub-menu {
background-color: #f5f5f5;
}
Paste custom CSS under Appearance > Customize > Additional CSS.
Using block themes and navigation blocks (FSE)
If your theme uses Full Site Editing (FSE), the steps are a little different.
- Go to Appearance > Editor.
- Click “Templates” or “Template Parts” and open the one that contains your header.
- Select the Navigation block.
- Use the sidebar or drag-and-drop to add, move, or nest menu items.
- Save changes.
Navigation blocks handle drop downs the same way: child items automatically appear in a submenu. But because this system is newer, some themes may require updates or custom tweaks to style the drop downs properly.
Drop down menu best practices
To create a drop down that’s easy to use and looks great:
- Keep labels short and clear (“About,” “Blog,” “Pricing”).
- Don’t overload with too many sub-items—5 or fewer is a good rule of thumb.
- Make sure your menu works on both desktop and mobile.
- Use visual indicators (like arrows) if your theme supports them.
- Check accessibility—drop downs should be keyboard navigable and screen reader friendly.
Recommended plugins for advanced menus
If you need more control than your theme allows, try one of these plugins:
- Max Mega Menu – Drag-and-drop builder with custom styling and mega menu support.
- QuadMenu – Advanced menu layouts with mobile optimization.
- Responsive Menu – Focuses on mobile menus and animations.
These can help you build large, complex navigation menus or stylize menus without coding.
Troubleshooting drop down menus
Running into problems? Here’s how to fix common menu issues:
- Drop down doesn’t show up – Your theme may not support drop downs, or another plugin could be interfering.
- Clicking a parent item doesn’t do anything – Use # as the URL for placeholder links (non-clickable parents).
- Drop down not working on mobile – Make sure your theme or plugin handles responsive menus. Try collapsing the menu or using a hamburger icon.
- Sub-items disappear too quickly – This could be a CSS issue. Try adjusting the hover delay or z-index via custom CSS.
Use browser developer tools (right-click > Inspect) to check if submenu items are being hidden or styled incorrectly.
Next steps for creating a drop down menu in WordPress
Creating a drop down menu in WordPress helps you organize your content and guide visitors more effectively. Whether you’re working with a classic theme or a block-based design, WordPress makes it easy to build intuitive menus with just a few clicks.
Once your menu structure is in place, take the time to preview it, test it on mobile, and tweak the style or behavior as needed using plugins or custom CSS.
Ready to take the training wheels off your WordPress site? Upgrade to professional hosting and see how better speeds, security, and reliability provide a foundation for a website and a brand that people find engaging and trustworthy. Liquid Web’s WordPress hosting options configure business-class servers and support plans specifically for WordPress websites.
Don’t want to deal with server management and maintenance? Our fully managed WordPress hosting is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.
You can avoid site speed problems when you’re with Nexcess Fully Managed WordPress or Liquid Web’s suite of WordPress hosting solutions.
Additional resources
How to build a WordPress site →
A complete beginner’s guide that covers 9 key steps to a successful launch
How to add a Facebook Like button in WordPress →
Discover how to schedule WordPress posts in advance to automate publishing and maintain a consistent content calendar.
How to use WordPress Gutenberg blocks →
A complete beginner’s guide to Gutenberg blocks