JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="product-menu__list">
  <li class="product-menu__item">
    <a href="javascript:;" class="product-menu__item_link">Элемент элемент1</a>
    <ul class="dropdown-menu js-first-lev">
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Элемент элемент1</a>
      </li>
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
      </li>
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
      </li>
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
      </li>
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
      </li>
    </ul>
  </li>

  <li class="product-menu__item">
    <a href="javascript:;" class="product-menu__item_link">Элемент элемент1</a>
    <ul class="dropdown-menu js-first-lev">
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Элемент элемент1</a>
      </li>
      <li class="dropdown-menu__item">
        <a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
      </li>
    </ul>
  </li>


</ul>

JavaScript

let ul = document.querySelector('.product-menu__list');
ul.onmouseover = evt => {
  let childrenUl = evt.target.querySelector('ul');
  if (childrenUl) {
    $el = [...childrenUl.children].pop().classList.contains('show');
    if (childrenUl.children.length > 3 && !$el) {
      let newButtonDown = document.createElement('li');
      newButtonDown.innerHTML = '<a href="#"> Показать еще </a>';
      newButtonDown.className = "dropdown-menu__item show dropdown-menu__item--grey without-dropdown";
      childrenUl.append(newButtonDown);
    }
  }
}