JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<a class="main-item" href="javascript:void(0);" tabindex="1" ><div class="button"><div></div></div></a> 
<ul class="sub-menu"> 
   <li><a href="#1">подпункт 1</a></li> 
   <li><a href="#2">подпункт 2</a></li> 
   <li><a href="#3">подпункт 3</a></li> 
</ul>

CSS

.sub-menu 
{ 
   display: none; 
} 
.main-item:focus ~ .sub-menu, 
.main-item:active ~ .sub-menu, 
.sub-menu:hover 
{ 
   display: block; 
} 
.button {
    width:35px;
    border-top:4px solid #70bf54;
    border-bottom:4px solid #70bf54;
    position:relative;
}
.button div {
    width:100%; 
    margin:6px 0;
    height:4px;
    background-color: #70bf54;
}