JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<!--Start Nav Menu-->
<nav>
    <ul id="bar1">
        
        <!--Begin About Us-->
        <li><a href="#">ABOUT US</a>
            <!--Begin drop down menu items-->
            <ul>
                <li>
                	<a href="#"><font color="#2b77a0">•</font> New to Nederland First AG</a>          
                    <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our History</span></a>
					<a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our Beliefs</span></a>
                </li>
                                          
            </ul>
            <!--End drop down menu items-->
        </li>
        <!--End About Us-->
        
                <!--Begin Ministries-->
        <li><a href="#">MINISTRIES</a>
            <!--Begin drop down menu items-->
            <ul>
                <li>
                	<a href="#"><font color="#2b77a0">•</font> Kids</a>          
                    <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Youth</span></a>
					<a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Women</span></a>
                    <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Men</span></a>
                </li>
                                          
            </ul>
            <!--End drop down menu items-->
        </li>
        <!--End Ministries-->
        
                        <!--Begin Events-->
        <li><a href="#">EVENTS</a>
            <!--Begin drop down menu items-->
            <ul>
                <li>
                	<a href="#"><font color="#2b77a0">•</font> Latest News</a>          
                    <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Monthly Calendar</span></a>
                </li>
                                          
            </ul>
            <!--End drop down menu items-->
        </li>
        <!--End Events-->

	         ...

CSS

nav {
	position: relative;
	width:960px;
	z-index:9999;
	margin-left:auto;
	margin-right:auto;
	padding:0;
	background-color:transparent;
	text-align:justify;
	margin-top:-10px;
	font-size:0.1px;
}


#bar1 {


	background-color:transparent;
	padding:0;
	text-align: justify;
    overflow: hidden;
	height:39px;
	border-top: 1px solid #222222; border-bottom: 1px solid #90908e;
	font-size:0.1px;
}


#bar1>li {
    display:inline-block;
	margin-top:8px;
	height:100%;
}


#bar1>li>a {
    font-family:'Oswald',Verdana, Geneva, sans-serif;
	font-size:15px;
	color:#464748;
	text-decoration:none;
	
}
#bar1>li>a:hover,#bar1>li>a:active,#bar1>li:hover>a {
    font-family:'Oswald',Verdana, Geneva, sans-serif;
	font-size:15px;
	color:#2b77a0;
	text-decoration:none;
	
}

#bar1>li>ul>li {
    border-top: none;
    height:29px;
	margin-top:8px;
	left: 0;
    position: absolute;
    width: 100%;
	text-decoration:none;
	background-color:transparent;
	padding-top:7px;
}


#bar1>li>ul>li{
    display:none;
	text-decoration:none;
}

#bar1>li>ul>li>a
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#90908e;
	text-decoration:none;
}

#bar1>li>ul>li>a:hover, #bar1>li>ul>li>a:active, #bar1>li>ul>li:hover>a,
{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
}

li {
	list-style-type:none;
}

.filler 
{
    width:100%;
    display:block;
    height:0px;
}

JavaScript

$("#bar1").on("click","li", function(){
    event.stopPropagation();
    $("#bar1 > li").each(function(){
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
    $(this).find("ul li").css("display", "block");
    $(this).find("ul li").css("background-color","transparent");
});
$('html').click(function() {
    $("#bar1 > li").each(function(){
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
});