JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<ul id="piano">
<li>
    <ul class="piano2">
        <li><a href="#">пункт1</a>
           <ul class="piano3">
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
           </ul>
        
        </li>
    
        <li><a href="#####">Пункт2</a>
           <ul class="piano3">
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
           </ul>        
        </li>
        <li><a href="#####">Пункт3</a>
           <ul class="piano3">
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
            <li><a href="#">подпункт</a></li>
           </ul>        
        
        
        </li>
        
    </ul>
</li>
<li>пункт3</li>
<li>пункт3</li>
<li>пункт3</li>
</ul>

CSS

#piano{
font-family: calibry,Tahoma;
    font-style: oblique;
}
#piano>li{
background: rgba(0,0,0,0.6);
    height: 25px;
}
#piano  a:link,#piano  a:visited{
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    margin: 5px 0px 5px 5px;
    text-decoration: none;
}
#piano a:hover{
color: rgba(255,255,255,0.9);
}

.piano2 {
    padding: 2px;
}
.piano2>li {display: inline;
    padding: 0px;
    height: 25px;
}
.piano2>li:hover>.piano3{
display: block;
}
.piano2{
    background: red;
}
.piano2 li{display: inline; background: red;}
.piano3{position: absolute; 
    background: green;
    display: none;
    border: 2px solid green;
}
.piano3>li {display: block; padding-right: 15px; }