JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<!--zindex & top animation-->

<div class="blocks" id="animate-test">
<p>
<a href="">A test</a>
<pre>   </pre>
<a href="">A test</a>
</p>
</div>
<div class="one"><p><a href="">A test</a></p><br><p><a href="">A test</a></p><br><p><a href="">A test</a></p></div>
<!--this acts as a placeholder over the 5px border, it will be a dropshadow img-->
<div id="dropshadow"></div>

CSS

#animate-test { 
    position:fixed; 
    top:0px; 
    float:left; 
    background-color:#333; 
    z-index: 100; 
    height:55px;
    width:100%;
}
.one { 
    position:relative; 
    width: 100%; 
    height: 105px; 
    display: block; 
    top:-50px; 
    float:left; 
    background-color:#eaeaea; 
    z-index: 50; 
    border-bottom: solid 5px #333; 
}
#dropshadow { 
    position:fixed;
    width:100%;
    z-index:9999;
    top:55px;
    background-color:rgba(69,153,17, .5);
    height:5px;
}
#animate-test a {
    padding: 0px 0px 0px 0px;
}
* { 
    padding: 0px; 
    margin: 0px;
}

JavaScript

//Wolff Olins Dropdown simulation

$("#animate-test a").mouseenter(function(){
        $(".one").filter(':not(:animated)').animate({top: "55px"});       
    }).mouseleave(function(){
      $(".one").animate({ top: "55px" });
    });
    $(".one").mouseenter(function(){
        $(".one").filter(':not(:animated)').animate({top: "55px"});       
    }).mouseleave(function(){
      $(".one").animate({ top: "-50px" });
    });