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 id="link1" href="#">Joyería</a>
				<a id="link2" href="#">Péndulos</a>
				<a id="link3" href="#">Minerales</a>
				<a id="link4" href="#">Masajeadores</a>
				<a id="link5" href="#">Regalos</a>
				<a id="link6" href="#">Velas</a>
				<a id="link7" href="#">Eventos</a>
			<!-- BIG SLIDING CONTAINER -->
			<div id="flydown">
				<div class="flydowns" id="menu1"></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*/

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

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

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

#nav a: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;
    background-color:yellow;
    width:100%;
    height:370px;
    left:300%;
    float:left;
}

#menu5 {
    position:absolute;
    background-color:orange;
    width:100%;
    height:370px;
    left:400%;
    float:left;
}

#menu6 {
    position:absolute;
    background-color:grey;
    width:100%;
    height:370px;
    left:500%;
    float:left;
}

#menu7 {
    position:absolute;
    background-color:aqua;
    width:100%;
    height:370px;
   ...