JSFiddle - React, Tailwind, and code Playground

HTML

<ul  id="menu">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
        <li>Пункт 4</li>
    </ul>

CSS

#menu
{
    overflow: hidden;
    height:20px;
    background: red;
}

#menu:hover
{
    overflow: visible;
 
}

JavaScript

var menu	= document.getElementById('menu');
var items	= menu.getElementsByTagName('li');

for (var x = 0; x < items.length; x++)
{
	items[x].addEventListener('click', function (ev)
    {
		console.log(this.innerHTML);
        // вот тут надо сделать сворачивание
	}, false);
}