JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<nav id="links">
    
    <div>
        <a href="#">Hello World</a>
        <div>Drop Down 1</div>
    </div>

    <div>
        <a href="#">Hello World</a>
        <div>Drop Down 2</div>
    </div>

    <div>
        <a href="#">Hello World</a>
        <div>Drop Down 3</div>
    </div>

    <div>
        <a href="#">Hello World</a>
        <div>Drop Down 4</div>
    </div>    


</nav>

CSS

#links > div { float: left; }
#links a { display: inline-block; padding: 10px; background: lime; }
#links div > div { height: 100px; width: 300px; background: red; }

JavaScript

$('#links a').hover(function(){
    
    $(this).siblings('div').show();
    
}, function(){

    $(this).siblings('div').hide();
    
});