Creating a multi-level drop-down menu

In this article, I will tell you how to create a multi-level drop-down menu using HTML, CSS and JavaScript. We will analyze step by step how to make such a menu convenient and modern. Even if you are a beginner, you will be able to follow these instructions and make your own drop-down menu. Let's go!

What is a multi-level drop-down menu?

A drop-down menu is an interface element that allows the user to quickly navigate the site. A multi-level menu has submenus that can be nested in each other. Such menus are often found on large sites with many categories and subcategories. An example of such a menu can be seen on the websites of online stores or corporate portals.

HTML structure for the drop-down menu

To create a multi-level drop-down menu, let's start with HTML. Let's create a basic menu structure using the <ul> and <li> elements for the list and sub-items:

<nav class="menu">
  <ul>
    <li><a href="# ">Home</a></li>
    <li><a href="# ">Services</a>
      <ul class="submenu">
        <li><a href="# ">Web development</a></li>
        <li><a href="# ">Mobile apps</a>
          <ul class="submenu">
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="# ">Contacts</a></li>
  </ul>
</nav>

Here we use nested lists <ul> to create multi-level menu items. Each <li> can contain a link (<a>) and a nested list (<ul>) to form a submenu.

Styling a menu with CSS

Now let's add styles to make our menu look beautiful and have drop-down functionality. CSS will help hide the submenus and show them when you hover over the parent element.

/* Основные стили для меню */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > ul > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

/* Скрываем подменю по умолчанию */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Показываем подменю при наведении на родительский элемент */
.menu li:hover > .submenu {
  display: block;
}

/* Стили для элементов подменю */
.submenu li {
  position: relative;
  margin: 0;
}

.submenu .submenu {
  top: 0;
  left: 100%;
}

Adding interactivity with JavaScript

To make the menu convenient on mobile devices, we will add some JavaScript. With JavaScript, we can control the display of the submenu when clicked.

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu li');

  menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    if (submenu) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        submenu.classList.toggle('show');
      });
    }
  });

  document.addEventListener('click', function() {
    document.querySelectorAll('.submenu').forEach(submenu => {
      submenu.classList.remove('show');
    });
  });
});

In this code, we add an event handler for each menu item with a submenu. The show class is added and removed to display and hide the submenu. We also add a handler to the entire document to hide the submenu when you click anywhere else on the page.

Conclusion

Creating a multi-level drop-down menu is not as difficult as it seems. The main thing is to understand the HTML structure and learn how to control the visibility of elements using CSS and JavaScript. A drop-down menu helps the user easily find the information they need and makes the site easier to use.

Try creating your own drop-down menu using this example. And if you want to learn how to make even more complex interfaces, I recommend trying the app Code. In it you will find courses on HTML, CSS and JavaScript that will help you quickly master web development and create even more interesting projects!