JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pagePrems">
    <div id="Majeur1" class="niveau1"><span><br /><br /><br />Majeur1</span>
        <div id="SOUSmajeur1" class="niveau2"><div><span>blabla</span></div>
    </div>
</div>

CSS

#pagePrems{position:relative;}

#Majeur1{
	top : 25px;
	left : 54px;
	position:absolute;
	width: 150px;
	height : 150px;	
	background-color : red ;
	z-index: 30;
	text-align: center;
	color : #ffffff;
	font-size: 18px;
	display: block; 
}


#SOUSmajeur1{
	position:absolute;
	width: 300px;
	height : 300px;	
	top : 10px;
	left : 120px;
	background-color : green ;
	z-index: 20;
	text-align: center;
	font-size: 13px;
}

.niveau2{
	display: none;
}

.niveau1:hover .niveau2 {
	display: block; 
}

.niveau1:hover  {
	background-color : black ;
}