How to create a dropdown menu

Oct 27, 20237 min read

When learning how to make a website, navigation design is the last thing you want to overlook. It influences how visitors interact with your website and ultimately determines whether they stay and convert or leave in frustration. A dropdown menu—a fundamental yet often underestimated feature—can help you reduce clutter in your web design, streamline your website navigation menu and much more.

Whether you’re a seasoned web developer looking for coding and styling advice or a newcomer seeking to grasp the essentials, this article will teach you how to create a dropdown menu and use the feature to your advantage.

Create stunning dropdown menus in minutes with Wix’s website builder.

What is a dropdown menu?

A dropdown menu is a UX design element that presents a list of options to the user when the user clicks it or hovers above it. By concealing secondary options until the user activates the menu, dropdowns reduce visual noise, thereby improving the overall user experience. They’re useful in various circumstances like website menus, system configuration settings and online forms.

dropdown menu example on Wix site, Evolve Clothing

What’s the difference between a menu list and a dropdown menu?

A menu list is like an open book—it shows all available options right there on the screen, either lined up horizontally or stacked vertically. It's upfront but takes up more screen real estate. Therefore, if your site is complex with lots of sections and categories, you’d want to rely on dropdown menus to expand your menu list without overwhelming the page.

Imagine you have an online store that sells all kinds of clothes: stuff for men, women, kids and even things like shoes and accessories. If you tried to show every single item on your main menu, things would get crowded and confusing really fast. That's where dropdown menus come in handy.

When someone visits your website, they would just see simple choices like "Men," "Women," "Kids" and "Home." It's like keeping your options behind closed doors. When the visitor is interested and clicks on one of those options, like "Women," a dropdown menu opens up. Now they can see more choices like "Tops," "Bottoms," "Dresses" and "Shoes." It's a neat way to keep things organized without overwhelming your visitors.

Beyond saving space in your menu list, dropdown menus can also bring some much-needed structure to your forms. Instead of having a free-text field where users have to type their country—a situation ripe for typos and inconsistencies—you can incorporate a dropdown list of countries. Your customers simply click and select, reducing both errors and the time it takes to fill out the form.

How to make a dropdown menu in HTML

Whether you're a seasoned developer looking for a quick refresher or a beginner diving into the world of web development, this section has you covered. We'll walk you through a step-by-step guide on crafting an effective dropdown menu in HTML, simplifying complex codes into digestible chunks. By the end, you'll know how to build a dropdown menu that's not just functional but also user-friendly.

01. Decide where you want your dropdown menu to appear

Dropdown menus are versatile elements that can be placed in various locations depending on your website's needs and design. Aside from the common placement in navigation bars and forms, here are a few other spots where a dropdown could be useful:

Sidebar menus: If your website has a sidebar for additional navigation or resources, a dropdown menu can help organize content without taking up too much space.
Content sections: Within a lengthy article or tutorial, you might use a dropdown to allow users to jump to specific sections or topics.
Product pages: On eCommerce sites, dropdowns can be used for selecting product options like size, color or quantity.
Search filters: On pages with a search feature, dropdowns can serve as filters to help users narrow down their search criteria, such as by date, category or relevance.
Footer: Some websites place additional navigation or resources in the footer, and a dropdown can be a neat way to include those without overwhelming the user.
Modal windows or pop-ups: If you have a sign-up form or a settings menu that appears as a modal window, a dropdown can simplify the interface.
Dashboard interfaces: In admin or dashboard areas of websites, dropdown menus can help users quickly switch between different panels or categories.
Interactive maps or charts: In infographics, interactive charts or maps, dropdowns can be used to let users customize what information is displayed.
Tables: Within a table, dropdowns can be used to sort data or to apply filters to the displayed information.
Interactive quizzes or surveys: Dropdowns can be used for multiple-choice questions or to gather other types of data in an interactive quiz or survey.

02. Add the <ul> element

Once you decide where you want to put your dropdown menu, identify where in the code you want the dropdown to sit. If you wanted to add a dropdown to the products link of your navigation bar, you would add an unordered list (<ul>) under the products line, then add the list items underneath that:

<nav>
  <ul class="menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">Products
    <ul class="dropdown-menu">
      <li><a href="/womens-apparel">Women's Apparel</a></li>
      <li><a href="/mens-apparel">Men's Apparel</a></li>
      <li><a href="/interior-decor">Interior Decor</a></li>
    </ul>
    </li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

03. Hide the list

In order to make your dropdown hidden until the visitor hovers or clicks on the parent item, you'll need to add some CSS code:

.dropdown-menu {
  display: none;
}

To make the dropdown list appear on hover, you'd add the following to that snippet:

.dropdown:hover .dropdown-menu {
  display: block;
}

To make it appear on click, you'd need to employ JavaScript. Here's a simple jQuery example:

 $(document).ready(function(){
  $(".dropdown").click(function(){
    $(this).find(".dropdown-menu").toggle();
  });
});

04. Add some style

Because we used <ul> elements rather than <select> or <option> elements, we have plenty of room for customization. Here are a few examples of unique CSS properties you can use to give your dropdown menu some flair:

Background: You can set the background color or even a background image using the background or background-color properties.
Position: The position property, usually set to absolute or relative, controls the dropdown's placement.
Display: By default, you'll often set the display property to none to hide the dropdown and then toggle it to block on hover or click.
Text styling: Utilize color, font-size, font-family and text-align to style the text within the list items.
Paddings and margins: Control the spacing inside (padding) and outside (margin) list items.
Borders: Add borders around your list items using the border property.
Hover state: Use the :hover pseudo-class to change styles when the mouse is over a list item.
Active state: Use the :active pseudo-class to style the list item during a mouse click.

Here's what the CSS file would look like if you incorporated all of these styling options into a dropdown menu:

nav {
  background-color:#333;
  color: white;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 20px;
}

.menu li {
  display: inline;
  margin-right: 20px;
}

li a {
  color: white;
  text-decoration: none;
}

.dropdown-menu {
  z-index: 1;
  display: none;
  position: absolute;
  background-color:#444;
  list-style-type: none;
  padding: 10px;

}

.dropdown-menu li {
  color: white;
  font-size: 16px;
  text-align: left;
  padding: 10px;
}

.dropdown-menu li:hover {
  background-color:#111;
}

.dropdown-menu li:active {
  background-color:#777;
}

.dropdown:hover .dropdown-menu {
  display: block;
}
 
.dropdown-menu li {
  margin: 0;
  padding: 10px;
}

.dropdown-menu li a {
  color: white;
  text-decoration: none;
}

Put it altogether, and this is what it looks like:

How to make a dropdown menu in Wix

Feeling a bit daunted by the thought of coding in your own dropdown menu? Worry not—Wix enables you to make a dropdown menu in just a few keystrokes. The best part is, if the styling options don't quite align with your vision, Wix Velo enables you to add your own code to the existing framework.

How to add a dropdown menu to the navigation bar

Click the plus-sign icon on the sidebar, then hover over "Menu & Anchor" and choose the style that catches your eye.
Once that's done, a newly minted navigation bar will appear on the page. If you don't see it, just click on the page icon in the sidebar—it'll take you to the same place.
To add a subsection dropdown menu, drag the relevant pages underneath the page you want to serve as the parent section. Then, hit the ellipsis icon next to each of those pages and click "Subpage." You'll notice the page shifts a bit, becoming indented and connected to the parent page with a line.
If you don't want the dropdown menu to have a main section, click the "Submenu title" button at the bottom of the "Site Pages and Menu" window. This action creates a "Folder" in your site menu list. Simply rename it and drag the relevant pages under this folder.
To adjust the styling, click the navigation bar element, then the paintbrush icon to open the design window. You can either choose from one of the presets or click "Customize Design" to make it your own.
Switch to the mobile editor to edit the appearance of the menu in that version of the site.