WordPress GuideBuild → 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:

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:

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:

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.

Example:

You can nest multiple levels, but two is usually enough to avoid confusing your visitors.

How to preview your menu

To see how your drop down looks on your site:

Keep in mind that styles can vary by theme. If your drop down doesn’t look right, your theme may need extra setup or support (more on that below).

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:

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.

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:

Troubleshooting drop down menus

Running into problems? Here’s how to fix common menu issues:

Use browser developer tools (right-click > Inspect) to check if submenu items are being hidden or styled incorrectly.

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