JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul class="customnav">
<li><a href="#">xxxxxxxxxxxxxxx</a></li>
<li class="tab-dropdown"  ><a href="#" class="active">xxxxxxxxxxxxxxx</a>
<div class="tabdropdown-menu">
<a href="#">Menuitem </a>
<a href="#">Menuitem </a>
<a href="#">Menuitem </a>
</div>

</li>
</ul>

CSS

ul,
li {
	list-style: none;
}

a,
a:focus {
	text-decoration: none;
}

ul.customnav>li {
	display: inline-block;
	border: solid 1px #ddd;
}

ul.customnav>li>a {
	color: #000;
	padding: 16px;
	display: inline-block;
	text-transform: uppercase;
}

ul.customnav>li>a:hover,
ul.customnav li a.active,
.tab-dropdown.menuopen a {
	color: #000;
	background: #ddd;
}

.tab-dropdown {
	position: relative;
}

.tabdropdown-menu {
	width: 100%;
	min-height: 50px;
	background: #ddd;
	position: absolute;
	flex-direction: column;
	display: none;
}

.tab-dropdown.menuopen .tabdropdown-menu {
	display: block;
}

.tab-dropdown.menuopen .tabdropdown-menu {}

.tabdropdown-menu a {
	color: #000;
	padding: 16px;
	display: block;
}

JavaScript

$(document).ready(function(){
        // Show hide popover
        $(".tab-dropdown").click(function(){
            $(this).find(".tabdropdown-menu").addClass("menuopen");
             $(this).toggleClass("menuopen") ;
        });
    });
    $(document).on("click", function(event){
        var $trigger = $(".tab-dropdown");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $(".tabdropdown-menu").closest(".tab-dropdown").removeClass("menuopen");
        }            
    });