JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="search">Item 5
    
<div id="search-box">
        <p>text</p>
        </div>
    </li>
</ul>
</nav>

CSS

nav{
    padding-top:50px;
    position:relative;
    float:left;
}
    
nav ul li{
 float:left;    
}

#search-box{
    position: absolute;
    right: 0;
    bottom: 17px;
    z-index: 10;
    background: rgba(22, 65, 135, 0.8);
    border-radius: 10px 10px 0px 0px;
    padding: 5px 10px;
    display:none;
}

JavaScript

$('nav > ul > li.search').hover(
        function () {
    //show its submenu
     $("#search-box").slideToggle();        
        }, 
        function () {
    //hide its submenu
     $("#search-box").slideToggle();    
});