Current Location：How HTML > HTML Articles > Content

How to Create a Drop Down Menu in HTML

How to Create a Drop Down Menu in HTML

Creating a drop down menu in HTML is a common task for web developers. Drop down menus are great for organizing and displaying a list of items in a space-efficient manner. In this tutorial, we will explore how to create a drop down menu using HTML and CSS.

Basic Drop Down Menu

The most basic form of a drop down menu in HTML is simply a list of links that are displayed when a user hovers over or clicks on a specific element. Here is an example of a basic drop down menu:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="dropdown">
  <span>Hover over me</span>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Output:

How to Create a Drop Down Menu in HTML

In this example, the drop down menu appears when the user hovers over the “Hover over me” text.

Styling the Drop Down Menu

You can customize the styling of the drop down menu using CSS. Here is an example of a styled drop down menu:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #555;
}
</style>
</head>
<body>

<div class="dropdown">
  <span>Hover over me</span>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Output:

How to Create a Drop Down Menu in HTML

In this example, the drop down menu has a black background color and white text, with a hover effect that changes the background color of the links.

Nested Drop Down Menus

You can create nested drop down menus by adding sub-menus within the main drop down menu. Here is an example of a nested drop down menu:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #555;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #555;
  min-width: 160px;
  z-index: 1;
}

.dropdown:hover .dropdown-submenu {
  display: block;
}
</style>
</head>
<body>

<div class="dropdown">
  <span>Hover over me</span>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="dropdown-submenu">
      <a href="#">Submenu 1</a>
      <a href="#">Submenu 2</a>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Output:

How to Create a Drop Down Menu in HTML

In this example, the main drop down menu contains a sub-menu that appears to the right of the main menu when hovered over.

Using JavaScript for Drop Down Menus

You can enhance drop down menus with JavaScript to add more interactivity and functionality. Here is an example of a drop down menu that uses JavaScript to toggle the visibility of the menu:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #555;
}
</style>
<script>
function toggleDropdown() {
  var dropdown = document.getElementById("dropdown");
  dropdown.classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropdown-btn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
</head>
<body>

<button id="dropdown" class="dropdown-btn" onclick="toggleDropdown()">Click me</button>
<div id="myDropdown" class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

</body>
</html>

Output:

How to Create a Drop Down Menu in HTML

In this example, clicking the “Click me” button toggles the visibility of the drop down menu. The drop down menu will also close if the user clicks anywhere outside of the menu.

Conclusion

In this tutorial, we have covered the basics of creating a drop down menu in HTML using CSS and JavaScript. Drop down menus are an essential part of web design and can greatly improve the user experience on your website. Experiment with the examples provided to create your own custom drop down menus for your web projects.

Like(0)

HTML Articles