JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div id="menu" >
<ul id="menul">
<li data-desc="Сфотографировать">С</li>
<li data-desc="Записать">З</li>
<li data-desc="Подключиться">П</li>
<li data-desc="Взять">В</li>
<li data-desc="Пройти">П</li>
    <li>Описание</li>
</ul>
</div>

CSS

#menu {

    position:absolute;
    top:100px;
    left:200px;
    
    background-color:#c2c2c2;
    
}

#menul > li {

    background-color:black;
    color:white;
    position:absolute;
cursor:pointer;
    
}

#menul > li:first-child {
top:0px;
left:40px
}

#menul > li:first-child +* {
top:40px;
left:0px
}
#menul > li:first-child +* +*{
top:40px;
left:90px
}

#menul > li:first-child +* +*+*{
top:90px;
left:25px
}
#menul > li:first-child +* +*+*+*{
top:90px;
left:55px
}
#menul > li:first-child +* +*+*+*+*{
top:120px;
left:50px;
    color:white;
}

JavaScript

$("#menu").on('hover','li',function(){
    
    $($("#menul").children(0)[5]).html($(this).data('desc'))
    })