JSFiddle - React, Tailwind, and code Playground

by nzifnab

HTML

<div class="top-nav">
  <a class="language" lang="es" hreflang="es" href="/es/los-elementos/dvds/">Vea esta página en Español</a>
  <a href="/">Home</a>
  <a href="/program-elements">Program Elements</a>
  <a href="/about/">About</a>
  <a href="/purchase/">Purchase</a>
  <a href="/contact-us/index.php">Contact Us</a>
</div>

CSS

.top-nav{
  position: relative;
  float: left; 
}


a{
  background-color: white;
  -webkit-box-shadow: 5px 0px 9px 3px #888888;
  -moz-box-shadow: 5px 0px 9px 3px #888888;
  box-shadow: 5px 0px 9px 3px #888888;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
  padding: 112px 100px 2px 8px;
  position: absolute;
  display: block;
  top: -100px;
  color: inherit;
  text-decoration: inherit;
  width: 200px;
  height: 17px;
}

a:hover{
  top: -90px; 
}

a:first-child{
  z-index: 9;
  padding-top: 94px;
  height: 35px;
  width: 140px;
  padding-right: 160px; 
}

a:first-child:hover{
  left: -18px;  
}

a:nth-child(2){
  z-index: 8;
  left: 50px; 
}

a:nth-child(2):hover{
  left: 32px;  
}

a:nth-child(3){
  z-index: 7;
  left: 100px; 
}

a:nth-child(3):hover{
  left: 82px;  
}

a:nth-child(4){
  z-index: 6;
  left: 150px; 
}

a:nth-child(4):hover{
  left: 132px;   
}

a:nth-child(5){
  z-index: 5;
  left: 200px; 
}

a:nth-child(5):hover{
  left: 182px;  
}

a:nth-child(6){
  z-index: 4;
  left: 250px;  
}

a:nth-child(6):hover{
  left: 232px;  
}

JavaScript

$(function() {
    $('.top-nav a').hover(function() {
        redrawMe($('.top-nav a'));
    })
});

function redrawMe(obj) {
    obj.hide().each(function() { this.offsetHeight; }).show();
}