JSFiddle - React, Tailwind, and code Playground

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul class="menu">
    <li class="menu__list">
    <a class="menu__link" href="#">Link</a>
      <ul class="sub-menu">
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
      </ul>
    </li>
    <li class="menu__list">
    <a class="menu__link" href="#">Link</a>
      <ul class="sub-menu">
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
      </ul>
    </li>
    <li class="menu__list">
    <a class="menu__link" href="#">Link</a>
      <ul class="sub-menu">
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
        <li class="sub-menu__list"> 
        <a href="#" class="sub-menu__link">Submenu Link</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

CSS

ul, li {
  padding: 0;
}

li {
  list-style-type: none;
   padding: 10px 0;
}

a {
  text-decoration: none;
  padding: 10px 0; 
}

.menu__list {
  position: relative;
}

.menu__link {
  padding: 10px 20px;
  background-color: lightblue;
}

.menu__list:hover {
  cursor: pointer;
}

.sub-menu {
  display: none;
  position: absolute;
  left: 80px;
  top: 0;
}

.sub-menu__link {
  padding: 10px 20px;
  background-color: lightcoral;
}

/*Вывод субменю по наведению мышкой*/
/* .menu__list:hover .sub-menu {
   display: block; 
}  */


.active {
  display: block;
}

JavaScript

const menuLinks = document.querySelectorAll('.menu__link');
const subMenus = document.querySelectorAll('.sub-menu');

menuLinks.forEach(link => link.addEventListener('click', () => {
	const subMenu = link.nextElementSibling;

  if(subMenu.classList.contains('active')) {
  	subMenu.classList.remove('active');
  } else {
   	subMenus.forEach(menu => menu.classList.remove('active'));
   	subMenu.classList.add('active');
  } 
}));