为什么子菜单不能覆盖在背景大图片上

为什么子菜单不能覆盖在背景大图片上css代码如下：

body{

font-family:"微软雅黑";

color: #14191e;

}

@font-face {font-family: 'iconfont';

    src: url('img/font/iconfont.eot'); 

    src: url('img/font/iconfont.eot') format('embedded-opentype'),

    url('img/font/iconfont.woff') format('woff'),

    url('img/font/iconfont.ttf') format('truetype'),

    url('img/font/iconfont.svg#iconfont') format('svg');

}

a{

text-decoration: none;

}

a:link,a:visited{

color:#5e5e5e;

}

.main{

width:1200px;

height:460px;

margin:30px auto;

position:relative;

overflow:hidden;

}

.banner{

width:1200px;

height:460px;

overflow:hidden;

position:relative;

}

.banner-slide{

width:1200px;

height:460px;

background-repeat:no-repeat;

float:left;

display:none;

}

/*添加链接的新方法*/

.slide1{

background-image:url(img/bg1.jpg);

}

.slide2{

background-image:url(img/bg2.jpg);

}

.slide3{

background-image:url(img/bg3.jpg);

}

.slide-active{

display:block;

}

/*共有属性，对button prev、button next共同起作用*/

.button{

    position: absolute;

    transform:rotate(180deg);

    top: 50%;

    left: 244px;

    height: 80px;

    width:50px;

    margin-top:-40px;

    background:url(img/arrow.png) center center no-repeat;/*背景图片向左向下居中，不平铺*/

}

/*对next单独设置*/

.next{

transform:rotate(0deg);

left:auto;

right:0;

}

.button:hover{

background-color:#333;

opacity: 0.8;

filter:alpha(opacity=80);

}

.dots{

position: absolute;

right: 15px;

bottom: 24px;

padding-right: 24px;

line-height: 12px;

text-align: right;

}

.dots span{

width: 12px;

height: 12px;

display: inline-block;/*融合行内于块级，效果等同于block+float left*/

border-radius: 50%;/*圆形*/

margin-left: 8px;

background-color: rgba(7, 17, 27, 0.4);/*设置颜色及透明度*/

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;

/*阴影效果，依次为： 顺序为: offset-x,offset-y,blur-size,

offset-x(x轴偏移), offset-y(y轴偏移), blur-size(值越大，模糊面积越大，阴影就越大越淡, 不能为负值默认为0), spread-size(取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。), color 阴影向内*/

    cursor: pointer;/*手形*/

}

.dots span.active{

box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

background-color: #ffffff;

}

.menu-box {

background:rgba(7, 17, 27, 0.5);

opacity: 0.5;

position: absolute;

left: 0px;

top: 0px;

width: 244px;

height: 460px;

z-index: 1;

}

.menu-content{

position: absolute;

left: 0px;

top: 0px;

width: 244px;

height: 460px;

z-index: 2;

padding-top: 6px;

}

.menu-item{

height: 64px;

line-height: 66px;

font-size: 12px;

cursor: pointer;

padding: 0 24px;

position: relative;

}

.menu-item a{

display: block;

color: #fff;

padding: 0 8px;

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

height: 63px;

font-size:16px;

}

/*最后一个文本框没有下边线*/

.menu-item:last-child a{

border-bottom:none;

}

.menu-item i{

position: absolute;

right: 32px;

top: 24px;

color: rgba(255,255,255,0.5);

font-size: 24px;

    top: 2px;

    font-style:normal;

    font-weight:normal;

    font-family:"iconfont";

}

.sub-menu {

border:1px solid #d9dde1;

background:#fff;

position: absolute;

left: 244px;

top: 0px;

width: 730px;

height: 458px;

z-index: 581;

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

}

.hide{

display:none;

}

.inner-box{

width:100%;

height:100%;

background:url(img/fe.png) no-repeat;

display:none;

}

.sub-inner-box{

width: 652px;

margin-left: 40px;

overflow: hidden;

}

.title{

color: #f01414;

font-size: 16px;

line-height: 16px;

margin-top: 28px;

font-weight: bold;

margin-bottom: 30px;

}

.sub-row{

margin-bottom:25px;

}

.bold{

font-weight:700;

}

.mr10{

margin-right:10px;

}

.ml10{

margin-left:10px;

}