JSFiddle - React, Tailwind, and code Playground

HTML

<div id="eol-navigation-search" class="">
    
    <form name="nav_search_form_enhanced" action="/search">
    
    <ul id="nav-eol-search" class="nav-search nav-search-visitor">
    <li class="link" id="nav-search-context">
    <a class="active" href="javaScript:void(0);" id="nav-search-selected">Search Workee</a>
    <ul class="menu" id="nav-search-menu">
    <li class="workee" ><a href="javaScript:void(0);">Search Workee</a></li>
    <li class="jobs" ><a href="javaScript:void(0);">Search Jobs</a></li>
    </ul>
    </li>
    <li class="nav-search-input"><input type="text" x-webkit-speech="x-webkit-speech" onfocus="" class="search" name="keywords" id="nav-search-keywords" style="width: 279px;"></li>
    
    </ul>
    </form>
    </div>

CSS

#nav-m-primary #nav-search-form {
    border-right: 1px solid #fff;
    float: left;
    margin-right: 10px;
    padding-right: 10px;
}
.nav-search-form {
    height: 20px;
}
ul.nav-search {
    height: 20px;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2000;
}
ul.nav-search > li {
    float: left;
    list-style-type: none;
}
li#nav-search-context {
    border-right: 1px solid #ccc;
}
li#nav-search-context a {
    color: #333;
    display: block;
    font-size: 11px;
    height: 12px;
    line-height: 12px;
    outline: 0 none;
    padding: 3px 15px 3px 9px;
    text-decoration: none;
    word-wrap: normal;
}
#nav-search-selected {
    background: rgba(0, 0, 0, 0) url("/media/images/4.0/nav/navsprite-icons.png?v=d666725a") no-repeat scroll right -140px;
}
li#nav-search-context > a {
    float: left;
}
li#nav-search-context, ul#nav-search-menu {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #f5f5f5 0px, #e6e6e6 100%) repeat scroll 0 0;
    border: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    display: inline-block;
    list-style-type: none;
    padding-left: 0;
    vertical-align: top;
}
ul#nav-search-menu {
    border-right: 1px solid #ccc;
    left: 0;
    margin: 0;
    min-width: 80px;
    padding: 0;
    position: absolute;
    top: 0;
}
ul#nav-search-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#nav-search-menu a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
}
ul#nav-search-menu a:hover {
    color: #5d9b33;
}
ul#nav-search-menu a#nav-search-menu-selected {
    background: rgba(0, 0, 0, 0) url("/media/images/4.0/nav/navsprite-icons.png?v=d666725a") no-repeat scroll right -140px;
    display: inline-block;
}
li.nav-search-input input {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ccc #ccc #ccc...

JavaScript

$("#nav-search-context").hover(function(){
						$("#nav-search-menu").show();
						
				  });
				  
				  $("#nav-search-context").click(function(){
						$("#nav-search-menu").show();
				  });
				  
				  
				  $("#wrapper").focusout(function() {
       				 $('#nav-search-menu').hide();
   				  });
				  
				   $('ul.menu li.workee').click(function(e) 
				   { 
				       $("#nav-search-menu").hide();
					   $('a.active').html("Search Workee");
					    $("input.search").focus();
					   			 
				   });
					
				   $('ul.menu li.jobs').click(function(e) 
				   { 
				   		$("#nav-search-menu").hide();	
						$('a.active').html("Search Jobs");
						$("input.search").focus();
						
					   		 
				   });
				   
					  
				   });