Vertical Toggle Divi Menu

script.js

<script type="text/javascript">
		(function($) {
			$(window).load(function() {
				$('#top-menu > .menu-item-has-children > a').attr('href', '#');
				$('#top-menu > .menu-item-has-children > a').each(function() {
					$(this).next('.sub-menu').addClass('hide');
				});

				$('#top-menu > .menu-item-has-children > a').click(function(event) {
					event.preventDefault();
					$(this).next('.sub-menu').toggleClass('visible');
				});

				$('.mobile_menu_bar').click(function(event) {
					$('#top-menu').slideToggle();
				});
			});
		})(jQuery);
	</script>

style.css

#main-header .nav li ul {
	position: static;
	opacity: 1;
	visibility: visible;
	border: none !important;
	padding: 0;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-ms-box-shadow: none !important;
	width: 100%;
	display: none;
}

#main-header .nav li a {
	padding: 10px 0 !important;
	line-height: normal !important;
}

#main-header .nav li ul li {
	padding: 0;
}

#main-header .nav li ul li a {
	width: auto;
	padding: 10px 5px !important;
}

#main-header .nav li a:after {
	top: 3px !important;
}

#main-header #top-menu li ul.sub-menu.hide {
    display: none!important;
}
 
#main-header #top-menu li ul.sub-menu.visible {
    display: block!important;
}

#mobile_menu {
	display: none !important;
}

#et-top-navigation {
	float: none !important;
}

@media all and (max-width:980px) {
	#main-header .logo_container {
		position: static;
	}

	#main-header #top-menu {
		float: none !important;
	}

	#main-header #top-menu li {
		display: block;
		padding: 0;
	}

	#main-header #top-menu-nav {
		float: none;
	}
 }