Javascript-форум - Изменение фоновой картинки проблема с подменю

Здравствуйте все! Помогите кто может решить такую задачу:

Есть сайт в нем меню 2 уровневое:

-пункт 1
-пункт 2
-под.пункт 1
-под.пункт 1
-пункт 3
-пункт 4

при наведении на верхние пункты меню меняется картинка бекграунда с добавлением класса типа bg1 bg2 bg3 и т.п.

но при наведении на вложенные пункты картинка не меняется нифига
(класс не добавляется)

Вот код

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src=""></script>

</head>
<body>
	<div id="back" class="bg1"></div>
		<div id="wrap">
			<div id="logo"><img src="/img/logo.png"></div>
		<nav>
			<ul>
				<li id="m1"><a href="#">ТД</a></li>
				<li id="m2"><a href="#">FASHION</a>
					<ul id="sub">
						<li ><a href="#">Универмаги / Магазины</a></li>
						<li ><a href="#"Boutique</a></li>
					</ul>
				</li>
				<li  id="m3"><a href="#">ИНТЕРНЕТ-МАГАЗИН</a></li>
				<li  id="m4"><a href="#">СУПЕРМАРКЕТ</a></li>
			</ul>
		</nav>
<div id="slogan">  </div>
		<div id="social">
			<ul>
				<li class="fb"></li>
				<li class="vk"></li>
				<li class="ok"></li>
				<li class="tw"></li>
				<li class="igramm"></li>
				<li class="ytube"></li>
			</ul>

		</div>
	</div>
</body>
<script>
window.onload = function () {
	
	
	
	
	//menu 1
	m1.onmouseover = function(){
	back.className='bg1';
	slogan.innerHTML = '24 года успешного бизнеса!';
	sub.children[0].style.display = 'none';
	sub.children[1].style.display = 'none';
	} 
	//menu 2
	m2.onmouseover = function(){
	back.className='bg2';
	sub.style.display = 'block';
	sub.children[0].style.display = 'block';
	sub.children[1].style.display = 'block';
	} 
	
	
	sub.children[0].onmouseover = function(){
	back.className='bg5';
	slogan.innerHTML = 'Более 100 европейских брендов модной одежды';
	}
	sub.children[1].onmouseover = function(){
        back.className='bg6';
	slogan.innerHTML = 'Одежда класса премиум';
	}
		
	sub.children[0].onmouseout = function(){
	sub.children[0].style.display = 'none';
	sub.children[1].style.display = 'none';
	} 
	sub.children[1].onmouseout = function(){
	sub.children[0].style.display = 'none';
	sub.children[1].style.display = 'none';
	} 
	//menu 3	
	m3.onmouseover = function(){
	slogan.innerHTML = 'Мода с доставкой на дом!';
	back.className='bg3';
	sub.children[0].style.display = 'none';
	sub.children[1].style.display = 'none';
	} 
	//menu 4
	m4.onmouseover = function(){
	back.className='bg4';
	slogan.innerHTML = 'Свежий взгляд на вкус!';
	sub.children[0].style.display = 'none';
	sub.children[1].style.display = 'none';
	} 

}

</script>
</html>

стили

html{}

body {
padding:0;
margin:0;
color:#fff;
font-family: 'Roboto', sans-serif;
}


#wrap {
position: fixed;
top: 25%;
width: 100%;

}

#back {
position: fixed;
display: inline-block;
z-index: -1;
width: 100%;
height: 100%;
background-size: 100% 100%;
}
.bg1 {
background:url('/img/back_01.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}
.bg2 {
background:url('/img/back_02.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}
.bg3 {
background:url('/img/back_03.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}
.bg4 {
background:url('/img/back_04.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}
.bg5 {
background:url('/img/back_05.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}
.bg6 {
background:url('/img/back_06.jpg');
-webkit-transition: background 0.5s ease-in-out; 
}

#logo {
margin: 0 auto;
width: 100%;
text-align: center;
}

nav {
position: relative;
width: 100%;
display: inline-block;

}
nav ul {
width: 100%;
margin: 0 auto;
white-space: nowrap;
text-align: center;
padding: 0;
}

nav li {
display: inline-block;
width: 210px;
height: 44px;
vertical-align: top;
background: rgba(0, 128, 0, 0.5);
text-align: center;
cursor: pointer;
white-space: nowrap;


}
nav li a {
text-decoration: none;
color: #fff;
padding: 5% 1% 0% 1%;
display: block;

}


nav li:hover {
background: rgba(0, 128, 0, 1);
box-shadow: 0px 0px 10px black;
}


nav ul li ul {
margin: 0;
padding: 0;
position: relative;
top: 20px;
}

nav ul li ul li {
display: none;
}


#sub {display:block;}

#slogan {
text-align: center;
margin-top: 11%;
text-shadow: 0 0 14px black;
font-size: 40px;

}





#social {
width: 100%;
margin-top: 1%;
}

#social ul {
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}

#social li {
display: inline-block;
cursor: pointer;
width: 55px;
height: 55px;
text-align: center;
background: url('/img/hc_smm.png') no-repeat;
white-space: nowrap;
border-radius: 50%;
}


#social li:hover {
background: url('/img/hc_smm_shdw.png') no-repeat;

}


#social li.fb {background-position: -10px -10px;}
#social li.vk {background-position: -65px -10px;}
#social li.ok {background-position: -119px -10px;}
#social li.tw {background-position: -174px -10px;}
#social li.igramm {background-position: -228px -10px;}
#social li.ytube{background-position: -283px -10px;}