JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<nav class='nav'>
  <a class='nav__item' href=""><span>link 1</span></a>
  <a class='nav__item' href=""><span>link 2</span></a>
  <a class='nav__item'>
    <span>drop 3</span>
    <ul class='nav__item__drop'>
      <li class='nav__item__drop__item'>drop 3 - 1</li>
      <li class='nav__item__drop__item'>drop 3 - 2</li>
      <li class='nav__item__drop__item'>drop 3 - 4</li>
    </ul>
  </a>
  <a class='nav__item' href=""><span>link 4</span></a>
  <a class='nav__item' href=""><span>link 5</span></a>
  <a class='nav__item'>
    <span>drop 6</span>
    <ul class='nav__item__drop'>
      <li class='nav__item__drop__item'>drop 6 - 1</li>
      <li class='nav__item__drop__item'>drop 6 - 2</li>
      <li class='nav__item__drop__item'>drop 6 - 3</li>
    </ul>
  </a>
</nav>

SCSS

a {
  text-decoration: none;
}
.nav__item {
  display: inline-block;
  position: relative;
  font-weight: bold;
  font-family: sans-serif;
}
.nav__item > span {
  display: block;
  padding: 10px 30px;
  background: red;
  color: #FFFFFF;
}
.nav__item__drop {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background: green;
  color: #FFFFFF;
}
.nav__item__drop__item {
  display: block;
  padding: 5px 15px;
}

JavaScript

/*  */
/*  */
/* находим все элементы меню */
var items = document.querySelectorAll('.nav__item');
// перебираем все элементы
for (var i = 0; i < items.length; i++) {
	// находим в каждом элементе всех детей	
	for (var j = 0; j < items[i].children.length; j++) {
  	// если ребенок это список с классом nav__item__drop
  	if (items[i].children[j].tagName === 'UL'
    	&& items[i].children[j].className === 'nav__item__drop') {
      // то на его родителя вешаем события
      // курсор над родителем
  		items[i].onmouseover = (e) => {
      	// снова перебираем всех детей, но уже у конкретного элемента
        for (var k = 0; k < e.currentTarget.children.length; k++) {
        	// снова, если ребенок это список с классом nav__item__drop
        	if (e.currentTarget.children[k].tagName === 'UL'
          	&& e.currentTarget.children[k].className === 'nav__item__drop') {
            // то меняем ему стили
          	e.currentTarget.children[k].style.display = 'block';
          }
        }
      }
      // курсор вне родителя, тут все аналогично как и с тем, что выше
  		items[i].onmouseout = (e) => {
        for (var k = 0; k < e.currentTarget.children.length; k++) {
        	if (e.currentTarget.children[k].tagName === 'UL'
          	&& e.currentTarget.children[k].className === 'nav__item__drop') {
          	e.currentTarget.children[k].style.display = 'none';
          }
        }
      }
      
    }
  }
}

/* 
	Это все можно еще упростить - что-то вынести в функции, чтобы избавиться от дублирования частей кода
*/
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */