Create a CSS Dropdown Menu From Scratch

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:

.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.

Adding Links

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

.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.

.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.