CSS Dropdown Menu: How to Make It + HTML Tutorial

CSS Dropdown Menu: How to Make It + HTML Tutorial

A dropdown menu contains a list of pages and subpages. Users can access its content by clicking on or hovering over the menu. 

This design element reduces the clutter of buttons, links, and text which is useful for enhancing a website or an app’s user experience on small screens.

Keep reading as we will cover the steps to create a dropdown menu using HTML and CSS. You will also learn to apply styles to the newly built dropdown menu to match your project’s branding.

Download Complete CSS Cheat Sheet

How to Create a CSS Dropdown Menu

This tutorial requires a text editor to create the HTML and CSS file containing the dropdown menu’s code. Alternatively, you can do this through the File Manager of your hosting control panel. The following dropdown menu guide will use the latter method.

Step 1. Create a File With HTML Code

To begin, create an HTML file for the actual dropdown menu content and syntax. Navigate to the File Manager from your hPanel dashboard and generate a new file called menu.html inside the public_html directory.

The menu.html file will contain the dropdown menu’s elements ‒ one parent element with five menu items. Each sub-menu will redirect users to different pages on your website.

Add the following code to the menu.html file:

<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdomain.com/page1.html">Sub-Menu 1</a>
    <a href="http://wwww.yourdomain.com/page2.html">Sub-Menu 2</a>
    <a href="http://wwww.yourdomain.com/page3.html">Sub-Menu 3</a>
    <a href="http://wwww.yourdomain.com/page4.html">Sub-Menu 4</a>
    <a href="http://wwww.yourdomain.com/page5.html">Sub-Menu 5</a>
  </div>
</div>

The dropdown, mainmenubtn, and dropdown-child classes represent different HTML elements. CSS will use them to access a specific element and alter its design.

This is how the HTML menu will look without any CSS rules:

Screenshot of a plain CSS dropdown menu

Pro Tip

Don’t forget to replace the links inside the href attributes with the URLs of your website pages and rename the sub-menus to reflect the actual page content.

Step 2. Add CSS and Create the Dropdown Effect

Now that you have HTML elements to work with, let’s create the dropdown effect and CSS rules for each of them.

Generate an internal stylesheet within the menu.html file by placing the following code inside the <style> element:

.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Pro Tip

In this example, the CSS styles are placed in the same HTML file (internal stylesheet). Use external CSS by linking the HTML document to a separate CSS file for easier modification.

The .mainmenubtn class name contains the CSS properties of the dropdown button. It sets the button’s background and font colors and omits the border. The cursor property dictates that the mouse cursor will change to the hand with the index finger extended symbol when hovering over the dropdown button.

Adding a hover selector to the .mainmenubtn class determines what the dropdown menu will look like when a user hovers over it.

The .dropdown class sets the dropdown menu’s position. In the above example, the CSS rules position the menu items under the parent menu. The inline-block property makes them appear without having a line break separating them.

The .dropdown-child class refers to the actual dropdown menu content. Using a display value of none makes the sub-menus invisible. .dropdown:hover .dropdown-child turns the entire element into a hoverable dropdown menu.

Pro Tip

Feel free to experiment with other CSS properties to get the desired design. You can even add JavaScript to create a responsive dropdown menu with dynamic animations.

Once you’re done, save and download the file. Here’s what the dropdown menu will look like when you open it on a web browser:

Screenshot of a CSS dropdown menu with added properties

Examples of HTML and CSS Dropdown Menus

Plenty of modern CSS dropdown menu templates are available so you don’t have to code one from scratch. At the very least, they’re a great source of inspiration.

The following dropdown menu template by kkrueger utilizes HTML and CSS. Each parent menu smoothly expands on hover, creating a dynamic and memorable look for the web page.

Animated example of kkrueger's dropdown menu

Another example comes from Bhakti Pasaribu. He utilizes JavaScript to create an interactive dropdown menu. The options appear with a flip animation upon clicking the parent menu. Another animation replaces the parent menu with the selected option, creating a seamless transition effect. This dropdown menu template is simple and dynamic in a unique way.

Animated example of Bhakti Pasaribu's dropdown menu

Minimalism enthusiasts may like what Chris Ota has to offer. His collapsable menu is subtle and doesn’t hog too much space. Still, it places user experience at the forefront. You can easily replace the list item descriptions with icons, further strengthening your site’s branding.

Animated example of Chris Ota's dropdown menu

If you’re looking for a more flashy menu with visual effects, we recommend checking out the Molten dropdown menu by Zealand. It utilizes CSS keyframe animations to create an eye-catching flickering flame around the navigation bar.

Animated example of Zealand's dropdown menu

Recursive Hover Nav by sean_codes offers a mega menu solution without obstructing the site’s user experience. The multi-level dropdown menu is built using HTML, CSS, and JavaScript. 

As your mouse hovers over the parent menu, the sub-menus appear with a slide transition animation. While it doesn’t have flashy effects like the other examples, this template is more practical when it comes to managing a menu with lots of content.

Animated example of dropdown menu from sean_codes

Pro Tip

When designing a dropdown menu, make sure to consider the site’s user experience. A beautifully made CSS dropdown menu doesn’t guarantee great usability. In most cases, less is more.

Conclusion

Having a dropdown menu makes it easier to design an effective user interface. It reduces the number of elements cluttering your web page and, with an appropriate design, enhances the site’s aesthetics.

You can create a dropdown menu from scratch using HTML, CSS, and JavaScript. Alternatively, adopt one of the many dropdown menu templates coded by professional designers and adjust it to your preference.

We hope this article has provided you with a better understanding of how to design a CSS dropdown menu. Good luck.

Hostinger web hosting banner
Author
The author

Linas L.

Linas started as a customer success agent and is now a full-stack web developer and Technical Team Lead at Hostinger. He is passionate about presenting people with top-notch technical solutions, but as much as he enjoys coding, he secretly dreams of becoming a rock star.