CSS Dropdown Menu

Today, dropdown menus are a common feature among most modern websites. These menus allow you to create more customized navigation features so users can easily find the content they are looking for on a website.

CSS can be used, in addition to HTML, to create a dropdown menu that shows content only when the user hovers over the menu label in the dropdown.

This tutorial will discuss, with examples, how to create a dropdown menu in CSS. By the end of reading this tutorial, you’ll have the tools and code you need to create your own dropdown menu.

CSS Dropdown Menu

In HTML, there is no specific tag for creating a dropdown menu.

However, if we use CSS, we are able to create a menu that shows text or a list of links when the user hovers over the menu. So, for this tutorial, we are going to leverage both HTML and CSS to create a dropdown menu.

A local badminton club has asked us to create a website for them to share information about their club online. This website will contain a number of pages about the club, its history, and how to join.

The club has asked if we could create a dropdown menu that is triggered when the user hovers over the menu. This menu should display a list of three pages: Equipment, Getting Started, and Membership Information. The label for this menu should be “New Members”.

Dropdown Menu Example

Let’s explore how we can create this dropdown menu in CSS.

To create our dropdown menu, we are first going to create a basic menu in HTML. We can do so using this code:

<div class="menu">
	<button class="dropdown_button">New Members</button>
	<div class="content">
		<a href="equipment.html">Equipment</a>
		<a href="gettingstarted.html">Getting Started</a>
		<a href="membership.html">Membership Information</a>
	</div>
</div>

In our code, we have:

• Created a <div> tag with the class menu which stores the code for our menu.
• Created a button with the text New Members showing.
• Created a new <div> in which our list of links appears.
• Used three <a> tags to create links to the equipment, getting started, and membership information pages.

Our code returns the following:

So far, we have not added any styles to our dropdown menu, so it appears in plain HTML. Here is the code we are going to use to style our dropdown menu for the badminton club’s website:

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

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

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

Our code returns:

[Code result here]


Let’s break down how our code works.

The dropdown_button class is used to style the dropdown button. In our code, we set the background color of the button to light green, change the color of the button’s text to white, add a 10px padding around the button, set the font size of the button to 15px, and we remove the border around the button.

The content class stores the styles for the content of our dropdown menu. This class is hidden by default (using display: none) and has a light gray background. In addition, the minimum width of elements using the content class is 150px, and the element is positioned absolutely. The content class also has an x-index of 1, which makes it appear above all other elements on the web page.

The menu class stores the styles for our entire menu. In our code, we position the contents of our <div class=”menu”> tag to be relative to the other elements on the web page. We also display the menu using the inline-block style, which displays our element as an inline-block container.

The .content a style is used to style the links in our dropdown menu. This style removes all underlines from the links (using text-decoration: none;), displays each link in the block style, sets the color of each link to black, and sets the padding around each link to 16px.

At the end of our code, we use the .content a:hover rule to define what should happen when the user hovers over a link in our dropdown menu using their cursor. In this case, when the user hovers over link in the menu, the background color of the link is changed to light gray (#f7f7f7).

We have also specified a rule .menu:hover .content which displays the contents of our menu as a block when the user is hovering over the menu.

If you’re interested in learning about how the CSS :hover selector works in more depth, read our CSS :hover selector guide.

Right Dropdown Menu

In our above example, we created a dropdown menu using HTML and CSS that appears on the left-hand side of the screen. However, you may decide that you want your dropdown menu to appear at the right of the screen.

To make this happen, you can apply the following CSS rule to the above code:

.content {
	right: 0;
}

This rule will move the dropdown and its contents to the right of the screen. 

Conclusion

HTML can be used to create the basic structure of a dropdown menu. Then, you can use CSS to apply styles to create a complete and aesthetically pleasing dropdown menu.

This tutorial discussed, with reference to an example, how to create a dropdown menu using HTML and CSS. Using the code we discussed in this article, you’ll be able to create your own dropdown menus in HTML and CSS.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match