JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="asd"> Глав меню </div>
<div class="asd2">под меню</div>

<div class="asd">Глав меню </div>
<div class="asd2">под меню</div>

<div class="asd">Глав меню</div>
<div class="asd2">под меню</div>

CSS

.asd { 
    cursor: pointer; 
    border: 2px solid #66CDAA;
    background-color:red;
    margin-top:50px;
    height: 55px;
    width: 80px;
    cursor: pointer;
}
 
 
.asd2 { 
    cursor: pointer; 
    border: 2px solid #66CDAA;
    background-color:red;
    display:none;
    height: 55px;
    width: 80px;
	float:left;
	position:relative;
    top:0px;
}

JavaScript

var asd = document.querySelectorAll('.asd'), asd2 = document.querySelectorAll('.asd2');

[...asd].map((e,i)=>
	e.onmouseover = ()=> {
		setTimeout(()=>block(i),100);
	}
);
[...asd].map((e,i)=>
	e.onmouseout = ()=> {
		setTimeout(()=>none(i),100);
	}
);

function block(x){
	asd2[x].style.display='block';
}
function none(x){
	asd2[x].style.display='none';
}