Drop-Down Menu Using HTML and Pure CSS

How to Create a Simple and Responsive Drop-Down Menu Using HTML and Pure CSS (Step-by-Step Guide)

A Drop-Down Menu is one of the most commonly used navigation elements in modern websites. It allows users to access multiple options from a single button or tab, displaying additional links only when the user hovers over or clicks on a specific item. This not only improves the user experience but also helps organize information neatly without cluttering the interface.

Using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), you can create an elegant, fully functional drop-down menu without any JavaScript. In this tutorial, we’ll go step-by-step to design a clean and responsive drop-down navigation bar using only HTML and CSS.

Table of Contents

📋 Prerequisites

Before you start, make sure you have:

A basic understanding of HTML and CSS.
A text editor such as Visual Studio Code, Sublime Text, or Notepad++.

🧱 Step 1: Create the HTML Structure for Drop-Down Menu

We’ll begin by setting up the HTML file that contains the structure of the drop-down menu.
The menu will use unordered lists (<ul>) and list items (<li>) to represent each main menu item and its corresponding sub-menu items.

HTML Structure Explained

<html>: The root element of the web page.
<head>: Contains metadata and links to external files such as stylesheets.
<body>: Holds all visible elements of the webpage.

Inside the <head> tag:

<meta charset="UTF-8" /> ensures that the document supports all major character sets.
<title> defines the name of the page visible on the browser tab.
<link> connects an external CSS file (styles.css) for styling.

Inside the <body> tag:

We’ll create a horizontal list of three menu items (Menu 1, Menu 2, Menu 3). Each of these will include a nested list that appears on hover, containing links such as Home, About, Service, and Contact.

💻 HTML Code

<html>
  <html>
  <head>
    <meta charset="UTF-8" />
    <title>Pure CSS Drop-Down Menu</title>
    <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>

Once the HTML structure is in place, save the file with a .html extension (for example, index.html). Next, we’ll move on to styling it with CSS.

🎨 Step 2: Add CSS Styling for Drop-Down Menu

Now that our menu is structured, it’s time to make it visually appealing and interactive using CSS.
We’ll use hover effects, transitions, and pseudo-elements to create smooth animations and a professional look.

Key Concepts:

:hover selector: Displays the dropdown items when the user hovers over the menu.
Transitions: Add smooth opening and closing animations.
Positioning: Keeps submenus aligned correctly under their parent items.

💻 CSS Code

@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;
}<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

✅ Final Result of Drop-Down Menu

Once you’ve saved both the HTML and CSS files, open the .html file in your browser.
You’ll see a smooth, animated drop-down menu that’s fully responsive and created using only HTML and CSS — no JavaScript needed!

🏁 Conclusion

And that’s it! You’ve successfully built a simple and responsive drop-down menu using pure HTML and CSS. By combining semantic HTML with clever use of CSS hover effects and transitions, you can design clean, user-friendly navigation menus for any website.

This approach avoids JavaScript entirely, keeping your code lightweight and efficient while maintaining smooth interactivity.

If you’d like to extend this further, you can:

Add icons to your menu items.
Make it mobile-friendly with media queries.
Customize colors and animations to fit your site’s theme.

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company