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

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

JavaScript

//Wolff Olins Dropdown simulation w/ fixed width & a jq generated wrap to drop same as fixed width content

$(".one").wrap("<div class='one-wrap'></div>");

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