Как сделать чтобы при наведении на блок — появляется другой блок?

Question

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

Что сделать чтобы блок description_nav появлялся не только при наведении на li.menu-item, но и остальные внутренние aтрибуты li

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

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

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

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

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

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

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';
						}
					}

Answer 1

[twobomb]

Зачем js для этого?

.description_nav{
  display:none;
}
#menu .menu-item:hover .description_nav{
  display:block;
}