JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<nav id="links">
    <a href="#">Hello World</a><!--
    --><a href="#">Hello World</a><!--
    --><a href="#">Hello World</a><!--
    --><a href="#">Hello World</a>
</nav>

<nav id="dropdowns">
    
    <div>Drop Down 1</div>
    <div>Drop Down 2</div>
    <div>Drop Down 3</div>
    <div>Drop Down 4</div>

</nav>

CSS

#links a { display: inline-block; padding: 10px; background: lime; }
#dropdowns div { position: relative; top: -10px; padding: 10px; background: red; height: 100px; width: 300px; display: none }

JavaScript

var index;
var over = false;

$('#links a').hover(function(){
    index = $('#links a').index(this);

    $('#dropdowns div:nth-child(' + (index+1) + ')').show();
    
}, function(){
    
    if(!over){
        $('#dropdowns div:nth-child(' + (index+1) + ')').hide();        
    }

    
});






$('#dropdowns').hover(function(){
    
    over = true;
    
}, function(){
    
    over = false;
    
});