JSFiddle - React, Tailwind, and code Playground

HTML

<!-- html code -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<header>
 <span id="icon-menu"><i class="fa fa-navicon"></i></span>
 <!-- keep me hidden untill a click -->
			<div class="menu-wrap">
				<div class="our-menu-large" id="large-menu" style="display: none;">
					<span class="btn-close" id="times-btn">&times;</span>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">about</a></li>
						<li><a href="#">services</a></li>
						<li><a href="#">project</a></li>
						<li><a href="#">contact</a></li>
					</ul>
				</div>
			</div>
			<!-- end keep me hidden untill a click -->
  <nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#" class="submenu-btn">About</a>
							<ul class="submenu" style="display: none;">
								<li><a href="#">Web Dev</a></li>
								<li><a href="#">Java</a></li>
								<li><a href="#">dot NET</a></li>
							</ul>
						</li>
						<li><a href="#" class="submenu-btn">Courses</a>
							<ul class="submenu" style="display: none;">
								<li><a href="#">HTML</a></li>
								<li><a href="#">CSS</a></li>
								<li><a href="#">JAVASCRIPT</a></li>
							</ul>
						</li>
            <li><a href="#">Contact</a></li>
					</ul>
				</nav>
</header>

CSS

nav > ul > li {
			display: inline;
			width: 109px;
			float: left;
			position: relative;
		}
		.submenu {
			background: #f5f5f5;
			padding: 10px;
			position: absolute;
			top: 37px;
		}
		.submenu li {
			list-style: none;
		}
    .our-menu-large {
			background: rgb(0,0,0);
			height: 100%;
			float: left;
			padding: 40px;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1000;
			color: #fff;
		}
		.our-menu-large ul li a {
			color: #fff;
		}
		.btn-close {
			color: #fff;
			position: relative;
			top: -26px;
    		left: 66px;
    		cursor: pointer;
    		font-size: 14px;
		}
		#icon-menu {
			cursor: pointer;
		}

JavaScript

var submenuBtn = document.getElementsByClassName("submenu-btn");
//loop through the buttons 
for (var i = 0; i < submenuBtn.length; i++) {
	submenuBtn[i].addEventListener("click", function() {
		var submenuContent = this.nextElementSibling;
		if (submenuContent.style.display === "none") {
			submenuContent.style.display = "block";
		} else {
			submenuContent.style.display = "none";
		}
	});
		window.addEventListener('click', e => {
		submenuContent = document.getElementsByClassName("submenu");
			for (var i = 0; i < submenuContent.length; i++) {
				// submenuContent[i];
				if (e.target != submenuContent && e.target.parentNode != submenuContent) {
		            submenuContent.style.display = 'none';
		        }
			} 
    	});
}

/* so make the large menu show on click */
	var menuButton = document.getElementById("icon-menu");
	var menuContent = document.getElementById("large-menu");
	var closeBtnMenu = document.getElementById("times-btn");

	menuButton.addEventListener("click", function() {
		if (menuContent.style.display === "none") {
			menuContent.style.display = "block";
		} else {
			menuContent.style.display = "none";
		}
	});

	closeBtnMenu.addEventListener("click", function() {
		menuContent.style.display = "none";
	});
  
  
  window.addEventListener("mouseup", function(event) {
	let subMenu = document.querySelectorAll(".submenu");
		for (let i = 0; i < subMenu.length; i++) {
			if(event.target != subMenu[i] && event.target.parentNode != subMenu[i]) {
				subMenu[i].style.display = "none";
			} else {
				submenu[i].style.display = "block";
			}
		}
    
    var menuContent = document.getElementById("large-menu"); 
    if(event.target != menuContent && event.target.parentNode != menuContent) {
				menuContent.style.display = "none";
			} else {
				menuContent.style.display = "block";
			}
});