JSFiddle - React, Tailwind, and code Playground

HTML

<div id='fakeDropdown'>
    <div class='triangle'> </div>
    
<div id='menu'>
    <a href='#'> link </a>
     <a href='#'> link </a>
     <a href='#'> link </a>
     <a href='#'> link </a>
</div>
        
</div>

CSS

#fakeDropdown{
 background-color: #888;
 height: 30px;
 width: 150px;
    cursor: pointer;
}
#menu{
    display: none;
    background-color: #888;
 height: 200px;
    width: 800px;
    position: relative;
    top: 30px;
}
.triangle{
 font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #000;
border-left: 10px solid #888;
border-right: 10px solid #888;
float: right;
margin-top: 5px;
}

JavaScript

$(document).ready(function(){
    
    $('#fakeDropdown').hover(function(){
       $(this).find('#menu').show('fast')
    });
    
    $('#fakeDropdown').mouseleave(function(){
        $(this).find('#menu').hide('fast')
    });
    
})