JSFiddle - React, Tailwind, and code Playground

by ldar

HTML

<div id="navigation">
    <ul>
        <li class="m1" id="a_1"><a href="">ссыль</a></li>
        <li class="m2" id="a_2"><a href="">ссыль</a></li>
        <li class="m3" id="a_3"><a href="">ссыль</a></li>
    <ul>

    <div class="hidden" id="aa_1">m1</div>
    <div class="hidden" id="aa_2">m2</div>
    <div class="hidden" id="aa_3">m3</div>
        
</div>

CSS

.hidden {
    position:absolute;
    top:40px;left:0;
    margin:0;padding:0;
    display:none;
    width:60%;height:100px;
    background:#ccc;
}
#navigation {
    margin:0;padding:0;
	background:#999;
	position:relative;
    width:100%;
}

#navigation ul {	
	margin:0px; 
	padding:0px;
	display:
}

#navigation ul li {
	position: relative;
	display: inline-block;
}

#navigation li a {
	color:#fff; 
	text-decoration:none;
	display: inline-block;
	padding: 10px;
}

JavaScript

$("li").hover(function()
{
    if (menu = $(this).attr('id'))
    {
        var menuId = menu.split('_');
        $('#aa_'+menuId[1]).toggle();
    }
});