Здравствуйте все! Помогите кто может решить такую задачу:
Есть сайт в нем меню 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;}