CSS

.headermenu ul{
	display:flex;
	flex-direction:row;
    margin:0;
    padding:0;
	list-style:none;
}

.headermenu ul li{
    display:flex;
	flex-direction:column;
	justify-content:center;
	transition:0.5s;
}

.headermenu ul li ul li{
    display:none;
}



.headermenu a{
    font-size:17px;
    color:#fff;
    transition: 0.3s;
    font-weight:400;
    display:block;
	padding:25px 20px;
	text-decoration:none;	
}

.headermenu a:hover{
	color:#fff;
    text-decoration:none;
    background-color:#54745c;
    box-shadow:inset 0 0 0 1px #54745c;
}



.headermenu .current-menu-item{
    background-color:#54745c;
}

.headermenu .current-menu-item a{
    color:#fff;
}






.headermenu-clicked ul{
	display:flex;
	flex-direction:row;
    margin:0;
    padding:0;
    list-style:none;
}

.headermenu-clicked ul li{
	display:flex;
	flex-direction:column;
	justify-content:center;
    position:relative;
    transition:0.5s;
}



.headermenu-clicked a{
    font-size:17px;
    transition: 0.3s;
    font-weight:400;
    display:block;
    color:#fff;
	padding:25px 20px;
    text-decoration:none;	
}

.headermenu-clicked a:hover{
    color:#fff;
	background-color:#54745c;
	text-decoration:none;
}




.headermenu-clicked-active a{
	background-color:#54745c;
}



.headermenu-clicked ul li ul{
    opacity:0;
    position:absolute;
    top:75px;
    left:0;
    border:#fff 0px solid;    
    border-radius:0 0 0 0;
    overflow:hidden;
    z-index:1500;
    background-color:rgba(54,97,126,0.7);
    display:block;
}

.headermenu-clicked ul li ul li{
    display:block;
    min-width:250px;
    box-sizing:border-box;
    background-color:transparent;
    margin:0;
}

.headermenu-clicked ul li ul li:first-child{
    margin-top:14px;
}

.headermenu-clicked ul li ul li:last-child{
    margin-bottom:14px;
}




.headermenu-clicked ul li ul li a{
	color:#fff;
	font-size:14px;
    padding:7px 25px 7px 25px;
    background:initial;
}

.headermenu-clicked ul li ul li a:hover{
    color:#fff;
}




.headermenu-clicked .current-menu-item{
    background-color:#54745c;
}

.headermenu-clicked .current-menu-item a{
    color:#fff;
}

jQuery

$(document).ready(function(){ 
	$('#headermenu-ul li').click(function(){

		if ($('#headermenu').hasClass('headermenu')){
				$(this).find('ul').css({'opacity':'1','transition':'0.5s'});
				$('#headermenu').removeClass('headermenu');
				$('#headermenu').addClass('headermenu-clicked');
				$(this).closest("li").addClass('headermenu-clicked-active');
				
				$(".headermenu-clicked ul li").not(".headermenu-clicked ul li li").hover(function(){
					$(".headermenu-clicked ul li").removeClass('headermenu-clicked-active');				
					$("#headermenu ul li ul").css({'opacity':'0','transition':'0.5s'});
					$(this).find('ul').css({'opacity':'1','transition':'0.5s'});
					$(this).closest("li").addClass('headermenu-clicked-active');
				});
				
		}else{						
			$("#headermenu ul li ul").css({'opacity':'0','transition':'0.5s'});
			$('#headermenu').removeClass('headermenu-clicked');
			$('#headermenu').addClass('headermenu');
			$(".headermenu ul li").not(".headermenu ul li li").hover(function(){
				$(".headermenu ul li").removeClass('headermenu-clicked-active');
			});
			$(".headermenu ul li").removeClass('headermenu-clicked-active');	
		}
	});	

	$(document).click(function(e) {
		if ($(e.target).closest('#headermenu').length === 0) {
			$("#headermenu ul li ul").css({'opacity':'0','transition':'0.5s'});
			$('#headermenu').removeClass('headermenu-clicked');
			$('#headermenu').addClass('headermenu');
			$(".headermenu ul li").not(".headermenu ul li li").hover(function(){
				$(".headermenu ul li").removeClass('headermenu-clicked-active');
			});
			$(".headermenu ul li").removeClass('headermenu-clicked-active');
		}
	});
});

HTML (WordPress menu) – Example

<div id="headermenu" class="headermenu">						
    <?php 
    $args = array( 'menu' => 'Primary', 'menu_class' => '', 'menu_id' => 'headermenu-ul', 'container' => false, 'theme_location' => 'primary-menu');
    wp_nav_menu($args);
    ?>							
</div>