How to Create a Hoverable Drop Down Menu with HTML and CSS

Faraz

By Faraz -

Learn how to build a hoverable drop down menu using HTML and CSS with our step-by-step tutorial. Perfect for beginners in web development.

Join us on Telegram
How to Create a Hoverable Dropdown Menu with HTML and CSS.jpg
Read AlsoCreate a Comic Book Style Grid Layout with HTML and CSS.jpgCreate a Comic Book Style Grid Layout with HTML and CSS (Source Code)

Table of Contents

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

In this tutorial, we'll walk through the process of creating a hoverable drop down menu using HTML and CSS. Drop down menus are common elements in web design, allowing users to access additional options or features. By the end of this guide, you'll have a functional and stylish dropdown menu that you can integrate into your web projects. Let's dive in!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our drop down menu.

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.

Here's a breakdown of each part:

1. <!DOCTYPE html>: Declares the document type and version of HTML being used.

2. <html lang="en">: The root element of the HTML document, with the language set to English.

3. <head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, and links to external resources.

  • <meta charset="UTF-8" />: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge" />: Instructs Internet Explorer to use the latest rendering engine available.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport width to the device width and initial scale to 1.0 for proper display on various devices.
  • <link rel="preconnect" href="https://fonts.go..." />: Prefetches a connection to Google Fonts to reduce latency when fetching fonts.
  • <link rel="preconnect" href="https://fonts..." crossorigin />: Prefetches a connection to Google Fonts' content delivery network.
  • <link href="https://fonts.g..." rel="stylesheet" />: Links to the Poppins font family from Google Fonts with various weights.
  • <link rel="stylesheet" href="styles.css" />: Links to an external CSS file named "styles.css" for additional styling.
  • <title>Dropdown</title>: Sets the title of the webpage to "Dropdown".

4. <body>: Contains the content of the HTML document visible to users.

5. <div class="dropdown">: Defines a container for the dropdown menu.

6. Inside the .dropdown div:

7. <div class="content">: Contains the elements representing the dropdown trigger.

8. Inside .content:

  • <span class="material-symbols-outlined"> settings </span>: Displays an icon representing settings.
  • <p>Settings</p>: Displays the text "Settings".
  • <span class="material-symbols-outlined"> expand_more </span>: Displays an icon representing expansion.

9. <button type="button"></button>: Represents the button that triggers the dropdown menu.

10. <div class="menu">: Contains the dropdown menu items.

11. Inside .menu:

12. <a>: Represents a link within the dropdown menu.

13. Inside <a>:

  • <span class="material-symbols-outlined"> lock </span>: Displays an icon representing locking.
  • <p>Account</p>: Displays the text "Account".

14. Similar <a> elements for other menu items like "Payments" and "Archive".

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

Read AlsoHow to Create a Scroll Down Button HTML, CSS, JavaScript Tutorial.webpHow to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

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 some basic CSS rules to create our drop down menu.

Here's a breakdown of each part:

1. * { box-sizing: border-box; }: Applies border-box box-sizing to all elements, ensuring that padding and border are included in the element's total width and height.

2. body: Styles applied to the body element:

  • display: grid;: Sets the display property to the grid.
  • place-items: center;: Centers the content both vertically and horizontally within the body.
  • margin: 0;: Removes default margin.
  • height: 100vh;: Sets the height of the body to 100% of the viewport height.
  • font-family: "Euclid Circular A", "Poppins";: Sets the font family to "Euclid Circular A" or fallback to "Poppins".
  • background: #45494e;: Sets the background color to a dark grayish color.

3. .dropdown: Styles applied to the dropdown container:

  • translate: 0 -20px;: This line seems to be incorrect. It should be transform: translate(0, -20px); to move the dropdown container slightly up.
  • position: relative;: Sets the positioning context for the dropdown.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over the dropdown.

4. .dropdown > button: Styles applied to the button within the dropdown:

  • width, height: Sets the width and height of the button.
  • border, border-radius: Sets border and border-radius properties for styling.
  • font-family, font-size: Sets font family and font size.
  • background: Sets the background color of the button.

5. .dropdown > .content: Styles applied to the content within the dropdown:

  • position: absolute;: Positions the content absolutely within the dropdown.
  • z-index: Sets the stacking order of the content.
  • top, left: Positions the content at the top-left corner of the dropdown.
  • width, height: Sets the width and height of the content.
  • padding: Adds padding around the content.
  • display: flex; align-items: center; justify-content: space-between;: Aligns the content items horizontally with space between them.
  • color: Sets the text color of the content.

6. .dropdown > .content::after: Styles applied to the pseudo-element after the content:

  • content: Sets content to an empty string.
  • position: absolute;: Positions the pseudo-element absolutely.
  • bottom, right: Positions the pseudo-element at the bottom-right corner of the content.
  • width, height: Sets the width and height of the pseudo-element.
  • transform: scaleX(0);: Initially scales the pseudo-element horizontally to 0.
  • background: Sets the background color of the pseudo-element.
  • transition: Applies a transition effect.

7. .dropdown:hover > .content::after: Styles applied when hovering over the dropdown:

  • transform: scaleX(1);: Scales the pseudo-element horizontally to 1, creating an underline effect.

8. .dropdown > .content > span:first-child: Styles applied to the first span element within the content:

  • font-size: Sets the font size of the first span.

9. .dropdown > .content > span:last-child: Styles applied to the last span element within the content:

  • margin-left: auto;: Pushes the last span element to the right.

10. .dropdown > .menu: Styles applied to the dropdown menu:

  • position: absolute;: Positions the menu absolutely.
  • z-index: Sets the stacking order of the menu.
  • top, left: Positions the menu relative to its parent.
  • display: grid;: Sets the display property to the grid.
  • width: Sets the width of the menu.
  • padding: Adds padding to the menu.
  • border-radius: Sets border-radius for styling.
  • translate: Incorrect property name, should be transformed.
  • visibility, opacity, scale: Sets initial visibility, opacity, and scale of the menu.
  • background: Sets the background color of the menu.
  • transition: Applies a transition effect.

11. .dropdown:hover > .menu: Styles applied when hovering over the dropdown:

  • visibility, opacity, scale: Changes the visibility, opacity, and scale of the menu to make it visible and fully scaled.

12. .dropdown > .menu > a: Styles applied to the anchor elements within the menu:

  • display: flex; align-items: center;: Aligns the items vertically within the anchor element.
  • gap: Adds spacing between elements.
  • color: Sets the text color of the anchor elements.
  • font-size: Sets the font size of the anchor elements.
  • padding: Adds padding to the anchor elements.

13. .dropdown > .menu > a:hover: Styles applied when hovering over the anchor elements within the menu:

  • background: Sets the background color of the anchor element to indicate hover.

14. .dropdown > .menu > a > span: Styles applied to the span elements within the anchor elements:

  • font-size: Sets the font size of the span elements.

This will give our drop down 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.

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  font-family: "Euclid Circular A", "Poppins";
  background: #45494e;
}

.dropdown {
  translate: 0 -20px;
  position: relative;
  cursor: pointer;
}

.dropdown > button {
  width: 170px;
  height: 60px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 17px;
  background: #3c3c3c;
}

.dropdown > .content {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f7f7f7;
}

.dropdown > .content::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 10%;
  width: 80%;
  height: 1px;
  transform: scaleX(0);
  background: rgb(255 255 255 / 30%);
  transition: 0.3s;
}

.dropdown:hover > .content::after {
  transform: scaleX(1);
}

.dropdown > .content > span:first-child {
  font-size: 20px;
}

.dropdown > .content > span:last-child {
  margin-left: auto;
}

.dropdown > .content > span:last-child {
  transition: 0.3s;
}

.dropdown:hover > .content > span:last-child {
  rotate: -180deg;
}

.dropdown > .menu {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  display: grid;
  width: 110%;
  padding: 70px 0 6px;
  border-radius: 6px;
  translate: -50% 0;
  visibility: hidden;
  opacity: 0;
  scale: 0.85;
  background: linear-gradient(#ea8d8d, #a890fe);
  transition: 0.3s;
}

.dropdown:hover > .menu {
  visibility: visible;
  opacity: 1;
  scale: 1;
}

.dropdown > .menu > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f7f7f7;
  font-size: 14px;
  padding: 0 24px;
}

.dropdown > .menu > a:hover {
  background: rgb(0 0 0 / 10%);
}

.dropdown > .menu > a > span {
  font-size: 20px;
}

Final Output:

How to Create a Hoverable Dropdown Menu with HTML and CSS.gif
Read AlsoCreate a User-Friendly Airline Booking Form with HTML and CSS.webpCreate a User-Friendly Airline Booking Form with HTML/CSS (Source Code)

Conclusion:

Congratulations! You've successfully created a hoverable drop down menu using HTML and CSS. Drop down menus are versatile components that can enhance user experience on websites. Feel free to experiment with different styles and functionalities to further customize your menus. Happy coding!

Code by: Joe

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: hoverable drop down menu, html, css, web development, dropdown menu tutorial, frontend development, source code, how to create a hoverable dropdown menu using html and css, step-by-step guide for hoverable dropdown menu in html and css, custom dropdown menu tutorial with html and css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post