JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_body">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
			<ul id="sub_menu_1">
				<li><a href="#">Подпункт №1</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
			<ul id="sub_menu_2">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
				<li><a href="#">Подпункт №4</a></li>
				<li><a href="#">Подпункт №5</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
			<ul id="sub_menu_3">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
			</ul>
		</li>
		<li><a href="#">Game</a></li>
		<li><a href="#">About</a></li>
	</ul>
</div>

CSS

* {
	margin: 0px;
	padding: 0px;
}
.wrapper {
	width: 230px;
	margin: 50px auto;
}
#menu_body li ul {
	display: none;
	overflow: hidden;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#eee;
    width: 230px;
 }
#menu_body a {
	display: block;
	padding: 10px 15px
} 
#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #dfdfdf;
} 
#menu_body ul li a {
    color: #333;
    text-decoration: none;
	font-size: 14px;
	font-family: segoe ui;
} 
#menu_body ul li a:hover {
    color: #258db9;
    text-decoration: none;
	background:#fff;
} 
#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
  	list-style-position: outside;
	background:#eee;
	padding-left: 10px;

} 
#menu_body ul li ul{
    border-top: 1px solid #fff;
}

JavaScript

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block";
	}
}
window.onload=startList;