It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Create a CSS Dropdown Menu From Scratch

Reading time 3 min
Published Nov 9, 2016
Updated Oct 2, 2019

TL;DR – CSS dropdown menu refers to a menu that hides several elements or displays additional information. This content usually appears on mouseover.

CSS Dropdown Menu: Main Tips

  • The CSS drop down menu hides content or options until a specific event occurs (usually when :hover triggers).
  • HTML creates the main structure, while CSS adds the main properties to style a button or text as a drop down menu.
  • Dropdown menus are common for adding navigational buttons.

Basic Drop Down Menu

CSS dropdown menu means that you create a toggleable menu mainly with CSS and only several HTML elements.

Take a look at this code example, showing the creation process of a drop down menu:

Example
.drop {
    position: relative; 
    display: inline-block;
}

.drop-content {
    position: absolute;
    background-color: #8842d5;
    min-width: 150px;
   padding: 15px;
   z-index: 1;
   display: none; 
}

.drop:hover .drop-content {
    display: block; 
}
  1. The first step is to create the HTML element which is going to be the initially visible item in the dropdown menu. For instance, <span> can reveal hidden elements once you hover over it.
  2. Then, it is necessary to add the content the dropdown menu hides. You do this by wrapping hidden elements in a <div>. display: inline-block positions the content.
  3. The <div> has position-relative to make sure that the hidden content appears below the visible element.
  4. It is necessary to include the position: absolute and display: none for the content box to guarantee that it remains hidden until hover.
  5. You can add properties of CSS for the dropdown menu: change the backgrounds, padding, width or fonts.
  6. Finally, we add :hover selector to display: block to make the hidden content appear once mouse cursors move over the visible element.

Note: overflow:auto enables scrolling of the hidden menu on smaller screens.

CSS dropdown menu with links can serve as navigational menus for websites.

Example
.drop_btn { /* This is for styling the dropdown button */
    background-color: #8842d5;
    color: white;
    padding: 15px;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

.drop { 
    display: inline-block;
    position: relative;
}
 	
.drop-content { /* For styling the content itself */
    background-color: white;
    min-width: 150px;
    display: none;
    position: absolute;
}
	
.drop-content a { /* For styling the links inside the content */
    color: black;
    padding: 15px;
    text-decoration: none;
    display: block;
}

.drop-content a:hover { /* Change the color of the dropdown links when they are hovered on */  	
    background-color: lightgray;
}

.drop:hover .drop-content { /* Shows the dropdown menu list when hovered on */
    display: block;
}

.drop:hover .drop_btn { /* Changes the dropdown button color once it is hovered on as well */
    background-color: #7300ff;
}

You create this type of menu by following the same steps from the previous section. However, instead of a text box, you have anchor elements that point to URLs.

Note: to make the link more suitable for the CSS dropdown menu, you need to apply text-decoration to delete the default underline.

Align Content to the Right

It is possible to make the content of a CSS drop down menu appear on the right side of the visible element instead of the default left, use a text-align: right.

Example
.drop-content {
    right: 0;
}

CSS Dropdown Menu: Useful Tips

  • <select> is an HTML element used for creating dropdown menus.
  • You can replace :hover with other options. For instance, JavaScript onclick makes the content of the menu appear after users click on the visible element.