Drop-Down Menu Using HTML and Pure CSS

By Faraz - July 14, 2022

Learn to create a simple and responsive Drop-Down Menu using HTML and Pure CSS. Step by step guide with clear code snippets and explanations.

Join us on Telegram

Read Also

Convert Form Fill Data into Interactive Badge using HTML, CSS, and JavaScript

Drop-Down Menu is a navigation element that is commonly used in websites to display a list of options when the user hovers over a specific item. It helps to create a better user experience and improves the overall navigation of a website. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options.

Dropdown menus help users easily navigate an app or website by narrowing down their choices. Most of the time it is seen inside the navigation bar or headers of websites.

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the two most important technologies used to create a website. In this article, we will be using Pure CSS to create a Drop-Down Menu, which is a better and more efficient alternative to using JavaScript.

Let's start making these amazing responsive drop down menu Using HTML, and CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, We will be using unordered lists to create the menu items and sub-items.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our drop-down menu using HTML, and now we can move on to styling it using CSS.

<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <ul class="hList">
      <li>
        <a href="#click" class="menu">
          <h2 class="menu-title">Menu 1</h2>
          <ul class="menu-dropdown">
            <li>Home</li>
            <li>About</li>
            <li>Service</li>
            <li>Contact</li>
          </ul>
        </a>
      </li>
      <li>
        <a href="#click" class="menu">
          <h2 class="menu-title menu-title_2nd">Menu 2</h2>
          <ul class="menu-dropdown">
            <li>Home</li>
            <li>About</li>
            <li>Service</li>
            <li>Contact</li>
          </ul>
        </a>
      </li>
      <li>
        <a href="#click" class="menu">
          <h2 class="menu-title menu-title_3rd">Menu 3</h2>
          <ul class="menu-dropdown">
            <li>Home</li>
            <li>About</li>
            <li>Service</li>
            <li>Contact</li>
          </ul>
        </a>
      </li>
    </ul>
  </body>
</html>

Read Also create a survey form with html and css.jpg

Create a Survey Form with HTML and CSS (Source code)

Step 2 (CSS Code):

Once the basic HTML structure of the drop-down menu is in place, the next step is to add styling to the drop-down menu using CSS.

Next, we will create our CSS file. In this file, We will use the CSS display property to hide the sub-items by default and then use the :hover selector to display them when the user hovers over the parent item.

This will give our dropdown menu an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html {
  background-color: #f8f8f8;
}

body {
  overflow: hidden;
  margin: 0 auto;
  background-color: #ffffff;
  font-family: "Roboto", sans-serif;
  color: #555555;
}

ul{
  list-style-type: none
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  box-sizing: border-box;
}

.menu {
  display: block;
  position: relative;
  cursor: pointer;
}

.menu-title {
  display: block;
  width: 150px;
  height: 40px;
  padding: 12px 0 0;
  background: #9dc852;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s background-color;
}

.menu-title:before {
  content: "";
  display: block;
  height: 0;
  border-top: 5px solid #9dc852;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 0 solid #dddddd;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  transition: 0.2s 0.2s border-top ease-out, 0.3s border-top-color;
}

.menu-title:hover {
  background: #8db842;
}

.menu-title:hover:before {
  border-top-color: #8db842;
}

.menu:hover > .menu-title:before {
  border-top-width: 0;
  transition: 0.2s border-top-width ease-in, 0.3s border-top-color;
}

.menu-title:after {
  content: "";
  display: block;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 0 solid #ebebeb;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 101;
  transition: 0.2s border-bottom ease-in;
}

.menu:hover > .menu-title:after {
  border-bottom-width: 5px;
  transition: 0.2s 0.2s border-bottom-width ease-out;
}

.menu-title_2nd {
  background: #4e96b3;
}

.menu-title_2nd:hover {
  background: #3e86a3;
}

.menu-title_2nd:before {
  border-top-color: #4e96b3;
}

.menu-title_2nd:hover:before {
  border-top-color: #3e86a3;
}

.menu-title_3rd {
  background: #c97676;
}

.menu-title_3rd:hover {
  background: #b96666;
}

.menu-title_3rd:before {
  border-top-color: #c97676;
}

.menu-title_3rd:hover:before {
  border-top-color: #b96666;
}

.menu-dropdown {
  min-width: 100%;
  padding: 15px 0;
  position: absolute;
  background: #ebebeb;
  z-index: 100;
  transition: 0.5s padding, 0.5s background;
}

.menu-dropdown:after {
  content: "";
  display: block;
  height: 0;
  border-top: 5px solid #ebebeb;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  transition: 0.5s border-top;
}

.menu:not(:hover) > .menu-dropdown {
  padding: 4px 0;
  background: #dddddd;
  z-index: 99;
}

.menu:not(:hover) > .menu-dropdown:after {
  border-top-color: #dddddd;
}

.menu:not(:hover) > .menu-title:after {
  border-bottom-color: #dddddd;
}

.menu-dropdown > * {
  overflow: hidden;
  height: 30px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0);
  white-space: nowrap;
  transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s padding cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s margin cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s 0.2s color, 0.2s background-color;
}

.menu-dropdown > *:hover {
  background: rgba(0, 0, 0, 0.1);
}

.menu:not(:hover) > .menu-dropdown > * {
  visibility: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: rgba(25, 25, 25, 0);
  transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.6s visibility;
  z-index: 99;
}

.hList > * {
  float: left;
}

.hList > * + * {
  margin-left: 0;
}

Final Output:

Read Also vanilla javascript crud operation with source code learn to create, read, update, and delete data.jpg

Perform CRUD Operations with Vanilla JavaScript | Source Code Included

Conclusion:

In conclusion, creating a Drop-Down Menu using HTML and Pure CSS is a simple and efficient process. By setting up the HTML structure, styling the menu with CSS, and making it responsive with media queries, you can create a Drop-Down Menu that provides a better user experience and improves the overall navigation of your website. By following the steps outlined in this article, you should be able to create a Drop-Down Menu that is both simple and responsive.

I hope this article has been helpful in your journey to create a Drop-Down Menu using HTML and Pure CSS. If you have any questions or need further assistance, please feel free to ask.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: drop-down menu, html, css, pure css, web development, drop-down navigation, responsive drop-down menu, simple drop-down menu, html5, css3

End of the article