Почему не скрываются, и не выводятся блоки при помощи JS?

Question

[Ростислав Комаров]

Необходимо, чтобы при загрузке страницы блоки с классом description_nav пропадали, а при наведении на li - появлялись. Где ошибка в коде?

document.getElementById('menu').onmouseover = function(event) {
						var target = event.target;
						if (target.className == 'menu-item') {
							var s = target.getElementsByClassName('description_nav');
							closeDescription();
							s[0].style.display='block';
						}
					}

					document.onmouseover=function(event) {
						var target = event.target;
						console.log(event.target);
						if(target.className!='menu-item' && target.className!='description_nav') {
							closeDescription();
						}
					}

					function closeDescription() {
						var menu = document.getElementById('menu');
						var submenu = document.getElementsByClassName('description_nav');
						for (var i=0; i<submenu.length; i++) {
							submenu[i].style.display = 'none';
						}
					}

<div class="menu" id="menu">
				<ul>
							<li class="menu-item">
								<a href="#"><img src="assets/img/message.png" alt=""></a><div class="description_nav">1</div>
							</li>

							<li class="menu-item">
								<a href="#"><img src="assets/img/camera.png" alt=""></a><div class="description_nav">2</div>
							</li>

							<li class="menu-item">
								<a href="#"><img src="assets/img/play.png" alt=""></a><div class="description_nav">3</div>
							</li>

							<li class="menu-item">
								<a href="#"><img src="assets/img/gamepad.png" alt=""></a><div class="description_nav">4</div>
							</li>

							<li class="menu-item">
								<a href="#"><img src="assets/img/tv.png" alt=""></a><div class="description_nav">5</div>
							</li>

							<li class="menu-item">
								<a href="#"><img src="assets/img/more.png" alt=""></a><div class="description_nav">6</div>
							</li>
				</ul>
			</div>

Answer 1

[Ростислав Комаров]

Забыл скрипт подключить :)