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>
    <img class="menu__arrow" src="https://www.svgrepo.com/show/304515/arrow-right.svg" alt="arrow">
      <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>
       <img class="menu__arrow" src="https://www.svgrepo.com/show/304515/arrow-right.svg" alt="arrow">
      <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>
       <img class="menu__arrow" src="https://www.svgrepo.com/show/304515/arrow-right.svg" alt="arrow">
      <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...

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__arrow {
  display: none;
  position: absolute;
  top: 20%;
  left: 70px;
}

.menu__list:hover {
  cursor: pointer;
}

.sub-menu {
  display: none;
  position: absolute;
  left: 95px;
  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');
const menuArrows = document.querySelectorAll('.menu__arrow');

menuLinks.forEach(link => link.addEventListener('click', () => {
	const menuList = link.parentNode;
	const subMenu = menuList.querySelector('.sub-menu');
  const menuArrow = menuList.querySelector('.menu__arrow');

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