老师，为什么sub-menu这么显示呢

来源：4-2 导航菜单样式

阿满___最帅

2020-01-11 13:45:12

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css">
<head>
<title></title>
</head>
<body>
<div class="main" id="main">
  
  <div class="menu-box">
  
  <div class="sub-menu">
   <div class="inner-box">

   </div>
  </div>
   
   <div class="menu-text">
    <div class="menu-item">
     <a href="">
     <span>手机、配件</span>
     <i>
     </i>
     </a>
    </div>
    <div class="menu-item">
     <a href="">
     <span>电脑</span>
     <i></i>
     </a>
    </div>
    <div class="menu-item">
     <a href="">
     <span>家用电器</span>
     <i></i>
     </a>
    </div>
    <div class="menu-item">
     <a href="">
     <span>家具</span>
     <i></i>
     </a>
    </div>
   </div>
  </div>
  
  <div class="banner" id="banner">
   <a href="">
    <div class="banner-slide slide1 slide-active">
     </div>
   </a>
   <a href="">
    <div class="banner-slide slide2">
     </div>
   </a>
   <a href="">
    <div class="banner-slide slide3">
     </div>
   </a>

</div>
  <a href="javascript:void(0)" class="button prev" id="prev"></a>
  <a href="javascript:void(0)" class="button next" id="next"></a>
  
  <div class="dots" id = "dots">
   <span class=active></span>
   <span></span>
   <span></span>
  </div>

</div>
<script src="index.js" ></script>
</body>
</html>

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color:#14191e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;

}
.slide-active{
display: block;
}
.slide1{
background-image: url("image/bg1.jpg");
}
.slide2{
background-image: url("image/bg2.jpg");
}
.slide3{
background-image: url("image/bg3.jpg");
}
.button{
position: absolute;
width: 40px;
height: 80px;
top:50%;
left:244px;
margin-top: -40px;
background:url(image/arrow.png) no-repeat center center;
}
.prev{
transform: rotate(180deg);
}
.next{
left: auto;
right:0;
}
.button:hover{
opacity: 0.4;
background-color:rgb(7,17,27,0.4);
filter: alpha(opacity=80); /*兼容其他浏览器*/
}
.dots{
position: absolute;
right: 20px;
bottom: 25px;
text-align: right;

}
.dots span{
display: inline-block; /*平行显示*/
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background:rgba(7,17,27,0.4);
/*box-shadow:设置阴影-0：水平方向 0：垂直方向 0：距离 2px：阴影程度*/
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; /*inset:设置内置阴影*/
margin-right: 10px;
cursor: pointer;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
background: #fff;
}
.menu-box{
width: 244px;
height: 460px;
position: absolute;
background: rgba(7,17,27,0.5);
opacity: 0.5;
z-index: 1;
}
.menu-content{
width: 244px;
height: 454px
z-index:2;
position: absolute;
padding-top: 6px;
}
a{
text-decoration: none;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size:16px;
padding:0 24px;
position: relative;

}
.menu-item a:link,.menu-item a:visited{
color: #fff;
}
.menu-item a{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.5);
padding: 0 8px;
height: 63px;

}
.menu-item i{
position: absolute;
right: 32px;
font-size: 24px;
}
.sub-menu{
width: 730px;
height: 458px;
border:1px solid #d9dde1;
background: #fff;
position: absolute;
left: 244px
z-index:100;
}

// 封装getElementById的方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var index = 0,
timer = null;
var pics = byId("banner").getElementsByTagName('div'),
len = pics.length;
var dots = byId("dots").getElementsByTagName('span');
function slideImg(){
var main = byId("main");

//滑过清除定时器，离开继续
main.onmouseover = function(){
//滑过清除定时器
if(timer)clearInterval(timer);
}
main.onmouseout = function(){

  timer = setInterval(function(){
   index++;
   if(index >= len){
    index = 0;
   }

   //切换图片
   changeImg();

  },2000)

}
//自动在main上触发鼠标离开的事件
main.onmouseout();
//便利所有点击，且绑定点击事件，点击圆点切换图片
for(var d=0;d<len;d++){
  //给所有span添加一个id的属性，值为d，作为当前span的索引
  dots[d].id = d;
  dots[d].onclick = function(){
   //改变index为当前span的索引
   // alert(this.id); //此事件绑在span上，因此this为span
   index = this.id;
   changeImg();

  }
}

var prev = byId('prev'),
  next = byId('next');
//下一页
next.onclick = function(){
  index++;
  if(index>=len) index = 0;
  changeImg();
}
//上一页
prev.onclick = function(){
  index--;
  if(index<0) index = 2;
  changeImg();
}

}
//切换图片
function changeImg(){
//遍历banner下多有的div及dots下所有的span，将div隐藏，将span清除类
for(i=0;i<len;i++){
pics[i].style.display = 'none';
dots[i].className = "";
}
//根据index索引找到当前div和当前span，将其显示出来并设为当前
pics[index].style.display = 'block';
dots[index].className = 'active';
}
slideImg();

写回答

1回答

阿满___最帅

提问者

2020-01-11

我弄好了！！不麻烦老师了~