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');

menu.addEventListener('click', function (ev){
    var t = ev.target;
    if(t.nodeName == 'LI')
        menu.style.overflow = 'hidden';
}, false);

menu.addEventListener('mouseover', function (ev){
    menu.style.overflow = '';    
}, false);