Drop-Down Menu Using HTML and Pure CSS

Faraz

By Faraz -

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
dropdown.png
Read AlsoBuilding a Responsive Sports Dashboard using HTML, CSS, and JavaScript.jpgBuilding a Responsive Sports Dashboard using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

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.

HTML Document Structure:

  • <html>: The root element of the HTML document.
  • <head>: Contains metadata and links to external resources like CSS files.
  • <body>: Contains the content of the web page.

Head Section:

  • <meta charset="UTF-8" />: Sets the character encoding of the document to UTF-8, which supports most characters from various languages.
  • <title>Pure CSS Drop-Down Menu</title>: Sets the title of the web page that appears in the browser tab.
  • <link rel="stylesheet" type="text/css" href="styles.css" />: Links to an external CSS file named styles.css for styling the page.

Body Section:

  • <ul class="hList">: Creates an unordered list with the class hList. This is styled to display the list horizontally.
  • <li>: Represents each item in the list.
  • <a href="#click" class="menu">: Creates a hyperlink with the class menu. The href="#click" attribute is a placeholder link.
  • <h2 class="menu-title">Menu 1</h2>: Creates a heading for the menu item with the class menu-title.
  • <ul class="menu-dropdown">: Creates another unordered list with the class menu-dropdown. This list contains the drop-down menu items.
    • <li>Home</li>: Represents each item in the drop-down menu.
    • <li>About</li>
    • <li>Service</li>
    • <li>Contact</li>

Menu Items:

  • Three main menu items (Menu 1, Menu 2, and Menu 3) are created, each with its own drop-down list.
  • Each menu item follows the same structure, but Menu 2 and Menu 3 have additional classes (menu-title_2nd and menu-title_3rd) for individual styling.

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.

Read AlsoExperience Certificate Generator in HTML, CSS, and JavaScript.jpgExperience Certificate Generator in HTML, CSS, and JavaScript

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.

Here's a breakdown of what each part does:

Importing Font:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
  • Imports the Roboto font from Google Fonts for use in the document.

Global Styles:

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;
}
  • Sets the background color of the html element.
  • Applies styles to the body, including hiding overflow, setting margins, background color, font, and text color.
  • Removes default list styles from ul.
  • Ensures links do not have underlines and inherit text color.
  • Applies box-sizing: border-box to all elements to include padding and border in element's total width and height.

Menu Styles:

.menu {
  display: block;
  position: relative;
  cursor: pointer;
}
  • Sets the .menu class to be a block-level element, positions it relative to its normal position, and changes the cursor to a pointer on hover.

Menu Title:

.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 styles the title of each menu item with padding, background color, text alignment, and transitions for background color.
  • :before and :after pseudo-elements create decorative borders for visual effects.
  • Changes background color and border color on hover and modifies the appearance of the borders when hovering over the menu.

Menu Title Variants:

.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;
}
  • Styles specific menu titles (menu-title_2nd, menu-title_3rd) with different background colors and hover effects.

Dropdown Menu:

.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 styles the drop-down menu with minimum width, padding, background color, and positioning.
  • :after pseudo-element creates a triangular arrow effect.
  • Changes padding and background color when the menu is not hovered.

Dropdown Items:

.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;
}
  • Styles items within the dropdown with transitions for height, padding, and color.
  • Items become visible with a background color on hover.
  • When the menu does not hover, items are hidden with transitions.

Horizontal List:

.hList > * {
  float: left;
}

.hList > * + * {
  margin-left: 0;
}
  • Floats each child element of .hList to the left, making them appear horizontally aligned.
  • Removes margin between adjacent list items.
@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:

dropdown.gif
Read AlsoCreate a Stunning Resume with Tailwind CSS.jpgCreate a Stunning Resume with Tailwind CSS (Source Code)

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

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post