Html

<ul class="menu" id="menu">
	<li class="m_item" id="m_item">
		<div class="m_item__content">
			 1
		</div>
		<ul class="sub_mnu">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</li>
	<li class="m_item" id="m_item">
		<div class="m_item__content">
			 2
		</div>
		<ul class="sub_mnu">
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</li>
	<li class="m_item" id="m_item">
		<div class="m_item__content">
			 3
		</div>
		<ul class="sub_mnu">
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</li>
</ul>


Sass

ul, li
	list-style-type: none
.m_item
	display: block
	cursor: pointer
.sub_mnu
	display: none
.m_item__content
	text-align: center


jQuery

$(".m_item__content").click(function() {
		if($(this).parent().children("ul").is (":visible")) {
			$(this).parent().children("ul").slideUp();
		} else {
				 $("body .m_item > ul").hide();
				 $(".m_item").removeClass("active");
				 $(this).parent().addClass("active");
				 $(this).parent().children("ul").slideToggle();
		}

		$(document).mouseup(function (e) {
    var container = $(".sub_mnu");
    if (container.has(e.target).length === 0){
        container.slideUp();
    }
    });
	});