CSS Dropdown Menu: Guide on How To Easily Create One

CSS dropdown menu lets you capitalize on the limited real estate when building web pages.

Most modern websites rely on the dropdown menus to create custom navigation features. These make it easy for users to navigate and find content on a website.

Moreover, this guide will equip you with the tools and code necessary to create a drop down menu in CSS.

What Is a CSS Dropdown Menu?

A CSS dropdown menu is an interactive list that reveals more options when a user clicks or hovers above it. The extra options can drop down or descend vertically and disappear when the user stops interacting with the menu. Often, dropdown menus are used in headers, navigation, and forms because they let you put more content on a website without cluttering it.

With CSS dropdown, you can create a style that responds to user input on a specific HTML element. The element can be a form, button, or heading. Once a user hovers above it or clicks the intended element, it results in a visual reaction.

CSS gives you a lot of creative freedom when designing a dropdown button CSS. Luckily, creating a CSS dropdown menu is relatively easy and we’ll tell you all about creating one below.

How To Create a Hoverable Menu

HTML does not have a specific tag for building a dropdown menu. However, you can combine CSS and HTML to build a dropdown menu that displays content once the cursor hovers above the menu.

In CSS, you also can create a pure CSS drop down menu depending on your design goals. Let’s have a look at the process of creating a hoverable dropdown menu.

– Create and Style a Div With “dropdown” as Its Class Name  

Start by creating a div and giving it a class attribute. In this example, the class attribute will be “dropdown.” Next, set the div’s position to relative and display to inline-block. It will display the dropdown content below your dropdown button.

Creating the div in HTML: 

<div class = “dropdown”> </div>

Styling the div in CSS:

.dropdown { position: relative; display: inline-block; }

– Create Hoverable Element

Now, create the element that is going to show the dropdown list once the user hovers above it. In this example, you will be creating a button and placing it inside the div.

Here is how to do it in HTML:

<div class = “dropdown”> <button> sample dropdown </button> </div>

– Create and Style the Content of the CSS Dropdown Menu

It is now time to create the content that will go in the actual dropdown which hides until the user interacts with the button. This example includes three drop down menu links with each link being wrapped inside a div that has dropdown-content as its class name: 

<div class = “dropdown-content”> <a href = “#”> Sample 1 </a> <a href = “#”> Sample 2 </a> <a href = “#”> Sample 3 </a> </div>

Next, set the div’s position to absolute and display to none and make its width 100 percent. It will ensure the contents appear below the dropdown button and its width is the same as the button. As well, set overflow to auto to make it possible to scroll on small screens.

Lastly, define the box-shadow property to make sure the content of the dropdown stands out from the background.

Styling the dropdown-content div in CSS: 

.dropdown-content { position: absolute; display: none; overflow: auto; width: 100%; box-shadow: 0px 9px 15px 0px rgba (0,0,0,0.3); }

– Set the Hover State of the Dropdown Menu 

To make sure the content of the dropdown appears when the cursor hovers above it, you must specify the display property of the div using pseudo-class “:hover.” The display property defines an element’s special state. In this example, observe how the content appears when the cursor hovers above it:

You can set the hover state in CSS like so:

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

– Style the Dropdown Menu Links 

If you do not style the links within the dropdown menu, they will appear like any other link – blue and underlined without spacing between them. So, to give them a unique look set the font color to black and padding to six pixels, and text decoration to none:

.dropdown-content a { color: #000000; padding: 6px; text-decoration: none; display: block; }

– Change the Dropdown Links Color on Hover

With CSS, you can make the links appear different on hover through the pseudo-class “:hover.” For instance, in this example, you can make the color of the background and text change on hover: 

.dropdown-content a:hover { background-color: #00A4BF; color: #FFFFFF; }

– Adding a Sub-Menu 

Often one top-level menu is not enough for complex websites. So, being able to add several tiers to a menu is an invaluable option. Luckily, it is not different from creating a dropdown menu. In the example, you can add a sub-menu below the “Sample 3” anchor as follows: 

<div class = “dropdown-content”> <a href = “#”> Sample 1 </a> <a href = “#”> Sample 2 </a> <a href = “#” id=”sample3”> Sample 3 </a> <ul class=”submenu”> <li> <a href=”#”> Submenu 1 </a> </li> <li> <a href=”#”> Submenu 2 </a> </li> <li> <a href=”#”> Submenu 3 </a> </li> </ul> </div>

In the unordered list, three elements were included. Note the CSS styling code for these submenu items set the display property to none:

.submenu { color: white; background-color: royalblue; display: none; margin: 6px; font-weight: bold; position: relative; text-align: right; list-style: disc; }

Moreover, you can use the “+” combinator to link a menu item to a submenu item. In this example, we can link the “sample3” id with the submenu class like so:

#sample3:hover + .submenu { display: block; background-color: royalblue; font-weight: bold; }

It allows the submenu to appear like other dropdown menus.

Customizing <Select> Dropdown Menu Lists

Today, CSS provides you with various properties that let you create a custom select style across the most popular browsers.

Some of these properties include: 

• clip-path that creates a custom dropdown arrow
• em units you can use for relative sizing
• CSS grid layout that aligns the native select to the arrow

The issue with the native <select> is that it varies across browsers in its appearance. The visible differences include line height, font size, and box size. However, the most notable one is the styling of the dropdown indicator.

So, you can use CSS to create a similar appearance across all the browsers.

– Resetting and Removing Inherited Styles 

To begin with, the best modern practice is the following reset: 

*, *::before, *::after { box-sizing: border-box; }

Next, start resetting native select using the following code to reset how it appears:

select { appearance: none; /* reset its style including removal of its default dropdown arrow*/ /* More resets for consistency */ border: none; background-color: transparent; margin: 0; padding: 0 1em 0 0; width: 100%; font-size: inherit; font-family: inherit; line-height: inherit; cursor: inherit; }

The appearance property, in this case, removes the native dropdown arrow in the select element.

If necessary, you can add the following rule to remove the arrow in older Internet Explorer versions:

select::-ms-expand { display: none; }

Lastly, remove the default outline as follows:

select { outline: none; }

The end result is a select element that has no visual indication before clicking on it. However, later on, we will add a replacement for the :focus state.

– Creating Custom Select Box Styles

First, you need to set some CSS variables to allow the select element to re-color flexibly: 

:root { – – select-border: #555; – – select-focus: red; – – select-arrow: var(- – select-border); }

Next, create the custom styles that will apply to the .select class: 

.select { width: 100%; min-width: 16ch; max-width: 32ch; border: 2px solid var(–select-border); padding: 0.27em 0.54; border-radius: 0.27em; font-size: 1.27rem; line-height: 1.2; cursor: pointer; background-image: linear-gradient(to top, f8f8f8,#777 33%); background-color: #777 }

Here, you first set the width constraints – the min-width and max-width. Next, set some box model properties such as border, padding, and border-radius. The em unit helps keep the properties proportional to the font size.

When resetting, you set various properties to inherit. Here, you need to define those such as line height, cursor, and font size. Also, you need to provide the background properties such as gradient to deliver the slightest dimension. Without the background properties, the select element will be transparent and will use the page background.

– Using Custom Select Dropdown Arrow

To accomplish this, you need to rely on a modern CSS property: clip-path. With clip paths, you can create all sorts of shapes by clipping square and rectangular shapes from most elements. Before clip-path got better support, alternative methods were: 

• Background-image
• Inline SVG as an extra element
• Border trick to build a triangle

Fortunately, clip-path gives a crisp, scalable arrow similar to SVG but with the benefits of using a custom variable. You can create the arrow by defining it as an ::after pseudo-element like this: 

.select::after { content: “”; width: 0.7em; height: 0.6em; clip-path: polygon(100% 0%, 0% 0%, 50% 100%); background-color: var(–select-arrow); }

To make the arrow appear, you need to update the .select to CSS grid layout like so:

.select { display: grid; }

Now, you can see the triangle created. To deal with the alignment issue, you can call upon a CSS grid hack. The old CSS solution is setting position to absolute while the new CSS solution entails setting singe grid-template-areas.

To do this, you first need to define the area as well as define that both the select and ::after use it: 

.select { grid-template-areas: “select”; } select, .select::after { grid-area: select; }

It will result in the arrow overlapping above the native select because of the stacking context through source order. Now, you need to rely on the grid properties to finish aligning each element as follows:

.select { align-items: center; } .select::after { justify-self: end; }

– Resolving the Missing Focus State

Now, since you got rid of the outline it is time you solve the missing :focus state. For this, you need to add one more element as the last child in the .select after the native select element.

Like so: 

<Span class=”focus”> </span>

This allows you to come with the rule below: 

select:focus + .focus { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: inherit; border: 4px solid var(–select-focus); }

Setting the position to absolute helps to avoid recalculating adjustments depending on padding, as it matches the size of an element. By pulling it two extra pixels in each direction ensures it overlaps the border property.

However, to ensure .select is relative to the select, you need to position it relative as shown below: 

.select { position: relative; }

Design Guidelines To Consider

Dropdown menus allow users to select options or actions from a contextual list. Usually, dropdown originates from a button.

• The default line height is 30 pixels
• You can use headers or dividers to organize items in a long list
• Items within the list have a click and hover states
• The minimum and maximum menu width is 168 pixels and 336 pixels respectively

– CSS Dropdown Menu Behavior 

• By default, choosing an item in the menu or clicking outside dismisses the menu. However, you can change the behavior to ensure the menu remains open on item selection
• The default opening position of a dropdown menu is along the left side.

– Recommendations 

• For the toggle, use a button with either an icon or text
• Order the menu items by usage
• Ensure the text is short and precise. Long menus will be truncated and an ellipsis added at the end
• Use nested menus to organize long lists into categories
• Limit the level of menus to three

– Nested Menus

A nested menu is an extension of a dropdown menu. These save screen space by organizing long lists into categories that users can click to reveal more details. They have the same visual style as standard dropdown menus have for a darker border. Also, these show a slight overlap over the root menu which emphasizes the stack order.

Other characteristics: 

• By default, the nested menu appears on the right side of the root menu
• If there is no space on the right side of the root menu, the nested menu will appear on the left
• A dropdown menu needs an element with a button role to open the menu
• Items must be inside the menu element and have the role of a menu item
• A visual element can be used as a separator to separate different groups in a menu. The separator is not interactive

Conclusion

With CSS, you can convert basic HTML structure into an appealing dropdown menu. Moreover, this guide discussed how to create a simple dropdown menu through these main points: 

• Dropdown menus hide content until a specific event happens usually a hover.
• The common use of dropdown menus is to add navigational buttons.
• HTML creates the basic structure but CSS lets you style dropdown menus.
• An element with a button role is the building block of a dropdown menu.
• Items in the menu can be a list of links.
• Creating a dropdown menu starts with creating a dropdown button.
• Next, provide the dropdown content including submenus.
• Set the hover state of the dropdown menu-content.
• Style the dropdown menu and change the dropdown menu content on hover.
• In addition, you can style the <select> dropdown menu with CSS.
• Consider design guidelines on behavior, nested menus, and recommended practice.

Now, you can use the code in this guide to come up with your own CSS style dropdown menus.