JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<ul id="piano">
  <li><a href="#">Пункт1</a>
    <ul class="piano2">
        <li><a href="#">пункт1</a>
           <ul class="piano3">
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
           </ul>
        
        </li>
    
        <li><a href="#####">Пункт2</a>
           <ul class="piano3">
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</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><a href="#">Пункт2</a>
    <ul class="piano2">
        <li><a href="#">пункт1</a>
           <ul class="piano3">
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
            <li><a href="#">подпункт1</a></li>
           </ul>
        
        </li>
    
        <li><a href="#####">Пункт2</a>
           <ul class="piano3">
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</a></li>
            <li><a href="#">подпункт2</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><a...

CSS

#piano{
font-family: calibry,Tahoma;
    font-style: oblique;
    background: rgba(0,0,0,0.6);
}
#piano>li{
    height: 30px;
    clear: both;
}
#piano>li>a{float: left;}
#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>li:hover>.piano2{
display: block;
}
#piano a:hover{
color: rgba(255,255,255,0.9);
}

.piano2 {
    padding: 2px;
    float: left;
    display:none;
    border-radius: 5px;
    

}

.piano2>li {float: left;
    padding: 0px 20px;
    height: 25px;
    background: #1870E7;
    border: 2px solid #1650E9;
}
.piano2>li:hover>.piano3{
display: block;
}

.piano3{position: absolute; 
    background: green;
    display: none;
    border: 2px solid green;
}
.piano3>li {display: block; padding-right: 15px; }