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>
CSS
.dropdown-menu {
display: none;
}
.product-menu__item:hover .dropdown-menu {
display: block;
}
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);
}
}
}