JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<!-- HEADER START -->
	<div id="header">
		<!-- LOGO -->
		<a href="http://www.aqua-aura.org/" id="logo"><img src="" alt=""></a>
		<!-- NAV -->
		<div id="nav">
			<!-- MAIN NAVIGATION LINKS -->
				<a class="navlink" id="link1" href="#">Joyería</a>
				<a class="navlink" id="link2" href="#">Péndulos</a>
				<a class="navlink" id="link3" href="#">Minerales en bruto</a>
				<a class="navlink" id="link4" href="#">Masajeadores</a>
				<a class="navlink" id="link5" href="#">Regalos mágicos</a>
				<a class="navlink" id="link6" href="#">Velas</a>
				<a class="navlink" id="link7" href="#">Eventos</a>
			<!-- BIG SLIDING CONTAINER -->
			<div class="flydown">
				<div class="flydowns" id="menu1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, atque quas asperiores unde facilis officia non. <a href="http://www.google.es" target="_blank">Esse</a> modi alias amet maiores, officia iste voluptatem laboriosam sed, temporibus sunt error ex!</div>
				<div class="flydowns" id="menu2"></div>
				<div class="flydowns" id="menu3"></div>
				<div class="flydowns" id="menu4"></div>
				<div class="flydowns" id="menu5"></div>
				<div class="flydowns" id="menu6"></div>
				<div class="flydowns" id="menu7"></div>
			</div>
		</div>
	</div><!-- /HEADER END -->
</div>

CSS

/*NAVIGATION*/

.flydown.permahover1 {
    left:0%;
    display:block;
}

.flydown.permahover2 {
    left:-100%;
    display:block;
}

.flydown.permahover3 {
    left:-200%;
    display:block;
}

.flydown.permahover4 {
    left:-300%;
    display:block;
}

.flydown.permahover5 {
    left:-400%;
    display:block;
}

.flydown.permahover6 {
    left:-500%;
    display:block;
}

.flydown.permahover7 {
    left:-600%;
    display:block;
}

#wrapper {
    height:100000px;
    width:1200px;
    position:relative;
    margin:0 auto;
    background-color:#eaebeb;
    overflow:hidden;
}

#nav {
    position:absolute;
    width:100%;
}

#nav .navlink {
    margin:0;
    padding:10px 0;
    float:left;
    width:14.28%;
    text-align:center;
    display:block;
    color:black;
    text-decoration:none;
    background-color:lightgrey;
}

#nav .navlink:hover {
    background-color:aqua;
}

/*FLYDOWN*/

.flydown {
    position:relative;
    text-align:left;
    top:36px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    display:none;
}

#nav #link1:hover ~ .flydown {
    left:0;
    display:block;
}

#nav #link2:hover ~ .flydown {
    left:-100%;
    display:block;
}

#nav #link3:hover ~ .flydown {
    left:-200%;
    display:block;
}

#nav #link4:hover ~ .flydown {
    left:-300%;
    display:block;
}

#nav #link5:hover ~ .flydown {
    left:-400%;
    display:block;
}

#nav #link6:hover ~ .flydown {
    left:-500%;
    display:block;
}

#nav #link7:hover ~ .flydown {
    left:-600%;
    display:block;
}

#menu1 {
    position:absolute;
    background-color:aqua;
    width:100%;
    height:370px;
    left:0%;
    float:left;
}

#menu2 {
    position:absolute;
    background-color:red;
    width:100%;
    height:370px;
    left:100%;
    float:left;
}

#menu3 {
    position:absolute;
    background-color:blue;
    width:100%;
    height:370px;
    left:200%;
    float:left;
}

#menu4 {
    position:absolute;
   ...

JavaScript

$("#link1").on("mouseover", function () {
    $(".flydown").addClass('permahover1');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover1');
});
$("#link2").on("mouseover", function () {
    $(".flydown").addClass('permahover2');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover2');
});
$("#link3").on("mouseover", function () {
    $(".flydown").addClass('permahover3');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover3');
});
$("#link4").on("mouseover", function () {
    $(".flydown").addClass('permahover4');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover4');
});
$("#link5").on("mouseover", function () {
    $(".flydown").addClass('permahover5');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover5');
});
$("#link6").on("mouseover", function () {
    $(".flydown").addClass('permahover6');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover6');
});
$("#link7").on("mouseover", function () {
    $(".flydown").addClass('permahover7');
});

$(".flydown").mouseleave(function () {
    $(".flydown").removeClass('permahover7');
});