How to Create a Dropdown List with HTML and CSS

Faraz

By Faraz -

Learn how to create a dropdown list using HTML and CSS with this easy-to-follow guide.

Join us on Telegram
how-to-create-a-drop-down-list-html-and-css.webp
Read AlsoGoogle Maps Integration using JavaScript.jpgGoogle Maps Integration using JavaScript

Table of Contents

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

Dropdown lists are a common feature in web forms. They let users choose an option from a list without overwhelming them with too many choices at once. In this blog, we’ll show you how to create a simple dropdown list using HTML and CSS. Whether you're a beginner or just looking to brush up on your skills, this guide will help you get started quickly.

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

Here's a breakdown of the HTML code:

1. Document Type Declaration

<!DOCTYPE html>
  • Purpose: Defines the document type and version of HTML being used. In this case, it's HTML5.

2. HTML Element

<html lang="en">
  • Purpose: The root element of the HTML document. The lang="en" attribute specifies that the language of the document is English.

3. Head Element

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Down List</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="styles.css">
</head>
  • Purpose: Contains meta-information about the document.
    • <meta charset="UTF-8"> sets the character encoding to UTF-8.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the page is responsive and scales properly on different devices.
    • <title>Drop Down List</title> sets the title of the webpage, which appears in the browser tab.
    • <link rel="stylesheet" href="https://fonts.googleapis.com/...."> links to the Poppins font from Google Fonts.
    • <link rel="stylesheet" href="styles.css"> links to an external CSS file named styles.css for additional styling.

4. Body Element

<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>
        <div class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
            <a href="#">Option 3</a>
            <a href="#">Option 4</a>
        </div>
    </div>
</body>
  • Purpose: Contains the content of the webpage.
    • <div class="dropdown"> is a container for the dropdown menu.
      • <button class="dropdown-button">Select an Option</button> is a button that, when clicked, will reveal the dropdown options.
      • <div class="dropdown-content"> contains the dropdown options as links (<a> elements). Each link represents a selectable option.
Read AlsoConvert Form Fill Data into Interactive Badge using HTML, CSS, and JavaScript.jpgConvert Form Fill Data into Interactive Badge using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Now, let’s style the dropdown list with CSS. Create a file named styles.css and add the below CSS code.

Here's a breakdown of the CSS code:

1. Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  height: 100vh;
}
  • display: flex;: Uses Flexbox layout to center content.
  • justify-content: center;: Centers items horizontally within the body.
  • align-items: center;: Centers items vertically within the body.
  • font-family: 'Poppins', sans-serif;: Applies the Poppins font to all text.
  • height: 100vh;: Sets the body height to 100% of the viewport height.

2. Dropdown Container Styling

.dropdown {
  position: relative;
  display: inline-block;
}
  • position: relative;: Positions the .dropdown element relative to its normal position, which helps position child elements absolutely within it.
  • display: inline-block;: Makes the .dropdown container behave like an inline element but also respects width and height.

3. Dropdown Button Styling

.dropdown-button {
  font-family: 'Poppins', sans-serif;
  background-color: #000; 
  color: #fff;
  padding: 12px 20px;
  border: none; 
  border-radius: 8px; 
  font-size: 16px;
  cursor: pointer; 
  transition: background-color 0.3s ease, transform 0.3s ease; 
}
  • font-family: 'Poppins', sans-serif;: Applies the Poppins font to the button text.
  • background-color: #000;: Sets the button background color to black.
  • color: #fff;: Sets the text color to white.
  • padding: 12px 20px;: Adds padding around the button text.
  • border: none;: Removes the default button border.
  • border-radius: 8px;: Rounds the button corners.
  • font-size: 16px;: Sets the button text size.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over the button.
  • transition: background-color 0.3s ease, transform 0.3s ease;: Adds smooth transitions for background color and transform changes.

4. Button Hover Effect

.dropdown-button:hover {
  background-color: #555; 
  transform: scale(1.05); 
}
  • background-color: #555;: Changes the background color to a lighter gray when hovering.
  • transform: scale(1.05);: Slightly enlarges the button when hovered.

5. Dropdown Content Styling

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px; 
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2); 
  border-radius: 8px; 
  z-index: 1; 
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; 
}
  • display: none;: Hides the dropdown content by default.
  • position: absolute;: Positions the dropdown content absolutely within its container.
  • top: 100%;: Positions the dropdown content just below the button.
  • left: 0;: Aligns the dropdown content with the left edge of the button.
  • background-color: #fff;: Sets the background color to white.
  • min-width: 200px;: Ensures the dropdown content has a minimum width.
  • box-shadow: 0px 4px 8px rgba(0,0,0,0.2);: Adds a shadow effect for depth.
  • border-radius: 8px;: Rounds the corners of the dropdown content.
  • z-index: 1;: Ensures the dropdown content appears above other elements.
  • opacity: 0; and visibility: hidden;: Hides the dropdown content with zero opacity and hidden visibility.
  • transform: translateY(-10px);: Moves the content up by 10 pixels.
  • transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;: Smooth transitions for opacity, visibility, and transform changes.

6. Dropdown Hover Effect

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0); 
}
  • display: block;: Shows the dropdown content when the parent .dropdown is hovered.
  • opacity: 1;: Makes the dropdown content fully visible.
  • visibility: visible;: Makes the dropdown content visible.
  • transform: translateY(0);: Resets the position of the content to its normal place.

7. Dropdown Content Links Styling

.dropdown-content a {
  color: #333;
  padding: 12px 16px; 
  text-decoration: none; 
  display: block;
  transition: background-color 0.3s ease; 
  font-size: 16px; 
}
  • color: #333;: Sets the text color of the links to dark gray.
  • padding: 12px 16px;: Adds padding around each link.
  • text-decoration: none;: Removes the underline from the links.
  • display: block;: Makes each link a block element, allowing it to take up the full width of the dropdown content.
  • transition: background-color 0.3s ease;: Smooth transition for background color changes.

8. Link Hover Effect

.dropdown-content a:hover {
  background-color: #ccc; 
  border-radius: 8px; 
}
  • background-color: #ccc;: Changes the background color of the link to a lighter gray when hovered.
  • border-radius: 8px;: Rounds the corners of the link when hovered.
body{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  height: 100vh;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  font-family: 'Poppins', sans-serif;
  background-color: #000; 
  color: #fff;
  padding: 12px 20px;
  border: none; 
  border-radius: 8px; 
  font-size: 16px;
  cursor: pointer; 
  transition: background-color 0.3s ease, transform 0.3s ease; 
}

.dropdown-button:hover {
  background-color: #555; 
  transform: scale(1.05); 
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px; 
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2); 
  border-radius: 8px; 
  z-index: 1; 
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; 
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0); 
}

.dropdown-content a {
  color: #333;
  padding: 12px 16px; 
  text-decoration: none; 
  display: block;
  transition: background-color 0.3s ease; 
  font-size: 16px; 
}

.dropdown-content a:hover {
  background-color: #ccc; 
  border-radius: 8px; 
}

Final Output:

how-to-create-a-drop-down-list-html-and-css.gif
Read Alsothe ultimate collection of css loaders and spinners for your website.jpgThe Ultimate Collection of CSS Loaders and Spinners for Your Website (Source code)

Conclusion:

Creating a dropdown list with HTML and CSS is straightforward and adds functionality to your forms. By following these simple steps, you can make your dropdown lists look great and work well. Experiment with different styles to match your website's design. If you have any questions or run into issues, feel free to ask for help!

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: how to create a dropdown list with html and css, easy dropdown list tutorial, styling dropdown lists with css, dropdown list, html dropdown, css dropdown, drop down list html, drop down menu for html
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺