Изменение css через JS. проблема

[batcave]

На сайте есть иконка (main_menu_container). При нажатии на иконку появляется небольшое меню(main_menu), фон затемняется (opacity_background с размером 100% на 100%, прозрачным бекграундом и z-index меньшим чем у менюшки. изначально его display none, но при нажатии на иконку становится block). Проблема такая: менюшка и фон появляются. В их html дописывается style="display:block;". НО! Дальше при нажатии на opacity_background main_menu и сам opacity_background должны снова стать diplay:none. По какой-то причине этого не происходит.Console молчит. Функция работает, если пихнуть туда алерты то по клику на opacity_background они появляются. Прошу помощи.
JS код прилагается:

var background = document.getElementById('opacity_background');
var menu = document.getElementById('main_menu');

document.getElementById('main_menu_container').addEventListener('click', popUpMenu);
background.addEventListener('click', hideMenu);

function popUpMenu() {
	background.style.display = 'block';
	menu.style.display = 'block';
}

function hideMenu() {
	background.style.display = 'none';
	menu.style.display = 'none';
}

[рони]

batcave,
добавьте html и css

[batcave]

<header id="main_header">
		<nav id="main_menu_container">
		<div id="main_menu">
				<form id="menu_form" action="google.com" method="post">
					<input type="submit" id="search_submit" value="">
					<div id="cross"></div>
					<input type="search" id="menu_search" placeholder="Search...">
				</form>
				<ul id="ul_category">
					<li>Furniture</li>
					<li>Decoration</li>
					<li>Lighting</li>
					<li>Electronics</li>
				</ul>
				<ul id="ul_info">
					<li>About Us</li>
					<li>Contact Us</li>
					<li>Delivery</li>
					<li>Returns</li>
				</ul>
			</div>
		<div id="opacity_background"></div>
		</nav>
		<div id="shop_bag"></div>
		<div id="logo">Soho</div>
	</header>

#main_menu_container, #shop_bag {
	float: left;
	width: 60px;
	height: 60px;
	border-right: solid 1px #2f2f2f;
	background-image: url(../images/mobile_menu_icon.png);
}
#opacity_background {
	display: none;
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	background-color: rgba(194, 196, 199, 0.6);
}
#main_menu {
	position: absolute;
	z-index: 101;
	margin: 0 auto;
	display: none;
	padding-bottom: 76px;
	width: 400px;
	background-color: white;
}

css добавил только тот что в js использую. или нужно все что в header?

[batcave]

Так-с, проблема была в том, что opacity_background я положил в main_menu_container. Теперь все работает.

[рони]

batcave,
клик по фону ставит 'none' и всплывает до main_menu_container и верхний клик ставит 'block'
отмените всплытие события

function hideMenu(event) {
  event.stopPropagation();
  background.style.display = 'none';
  menu.style.display = 'none';
}

[batcave]

Уже решил проблему, но спасибо!