Menu Dropdown

<!-- mobile menu -->
<div class="mobilenav--wrap">
    <div class="mobilenav">
    <?php
    if(function_exists('wp_nav_menu')):
        wp_nav_menu( 
            array( 
            'menu' =>'primary_nav',
            'theme_location' => 'primary_nav', 
            'container'=>'', 
				'depth' => 2,
				'menu_id' => 'menu' ) 
		);
		endif;
		?>
	</div>
</div>

//hide sub-menus
jQuery('.mobilenav ul ul').hide();

jQuery('.mobilenav ul.sub-menu').each(function() {
	if(jQuery(this).children().length){
		jQuery(this,'li:first').parent().append('<a class="menu-expand" href="#" style="font-size:26px;color:white;"><span class="plus1"></span><span class="plus2"></span></a>');
	}
});

jQuery('.mobilenav ul li.menu-item-has-children').on('click',function(e){
	//jQuery('ul.sub-menu').slideUp(300, function(){});
	//e.preventDefault();
	if (jQuery(this).hasClass("menu-clicked")) {
		jQuery(this).removeClass("menu-clicked");
		jQuery(this).children('ul').slideUp(300, function(){});
	} else {
		jQuery(this).addClass("menu-clicked");
		jQuery(this).children('ul').slideDown(300, function(){});
	}
})

/* mobile menu */
.mobilenav {
	width: 100%%;
	height: 100%%;
	overflow: scroll;
	padding: 0;
}

.mobilenav > ul {
	width: 100%%;
	box-sizing: border-box;
	padding-inline-start:0;
}

.mobilenav ul li {
	position: relative;

	list-style:none;
	font-size: 22px;
}

.mobilenav ul li a {
	display: block;
	padding: 15px 0px;
	text-decoration: none;
	color: color(3);
}

.mobilenav ul li a:hover {
	color: color(1);
	transition:all .6s ease;
}

.mobilenav ul li:hover ul {
	display:block;
}

.mobilenav ul ul li {
	border-bottom: 0;
	position: relative;
	font-size: 80%%;	
	padding:0!important;
}

.mobilenav ul ul {
	padding-left: 20px;
	background:none;
	padding:0 0 0 20px!important;
}

.mobilenav ul ul li a {
    padding: 5px 0 5px 20px;
}

a.menu-expand {
	padding: 0 !important;
	background: transparent !important;
	width: 44px;
	height: 44px;
	position: absolute; 
	top: 7px;
	right: 0;
	z-index: 100;
}

.mobilenav ul li.menu-item-has-children .plus1{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-180deg);
}

.mobilenav ul li.menu-item-has-children .plus2{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-270deg);
}

.menu-clicked .plus2 {
	transform: rotate(0)!important;
}