*{margin:0;padding:0}
/* check */
body{font-family:Arial,sans-serif;font-size:1.6vw;padding:0 1.6vw}


#nav{display:flex;position:relative;background:green repeat scroll 0 0;background-size:100% 100%;left:7.5vw;top:10vw;width:85vw;height:10vw;margin:0;padding:0;list-style:none outside none;text-align:center;align-items:center;justify-content:center}

#nav,#nav li,#lavalamp,#nav li ~ #lavalamp,#nav li ~ #lavalamp div,.animate{-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}

#lavalamp,#nav li ~ #lavalamp,#nav li ~ #lavalamp div,#nav li:hover ~ #lavalamp,#nav li ~ #lavalamp:hover{position:absolute;left:var(--left)} 
/* check */
#nav li{display:block;background:linear-gradient(#3669f9,#35e4b4);width:17vw;height:10vw;box-shadow:0 0 1.6vw rgba(0,0,0,.1)}
#lavalamp{top:2.5vw}

#nav li ~ #lavalamp,#nav li ~ #lavalamp div{background:red;width:20vw;color:var(--mColor);opacity:0;z-index:-1}
#nav li ~ #lavalamp div{opacity:1}

.animate{--aniY:1.5vw;-webkit-transform:translateY(var(--aniY));-moz-transform:translateY(var(--aniY));-ms-transform:translateY(var(--aniY));-o-transform:translateY(var(--aniY));transform:translateY(var(--aniY))}
.footer{position:fixed;background:#000;left:0;right:0;bottom:0;padding:.83vw .83vw;color:#fff;font-size:90%;text-transform:uppercase}

#nav li:not(:hover){--aniY:0}
#nav li:hover ~ #lavalamp,#nav li ~ #lavalamp:hover{top:12vw;opacity:1}