有没有知道这个问题怎么破的兄弟，菜单栏下面是一个轮播图，鼠标悬停在在菜单上会出现二级菜单，但是没有等鼠标挪到二级菜单那里，二级菜单就消失了，求破。（我把轮播图去掉就可以正常的点击二级菜单，但是把轮播图加上之后就会出现上述问题）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,
button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;}
li{list-style-type: none;}
a{text-decoration: none;color: #333}
.header{
width: 100%;
line-height: 40px;
height: 40px;
background-color: #333;
font-size: 12px;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header li{
float: left;
}
.header a{
color: #b0b0b0;
font-size: 12px;
}
.header a:hover{
color: #fff;
}
.header span{
color: #424242;
margin: 0 6px;
}
.nav{
position: relative;
width: 100%;
height: 100px;
//background-color:red;
}
.logo{
margin-top: 22px;
float: left;
width: 56px;
height: 56px;
background-color: blue;
border-radius: 50%;
}
.nav-bar{
/*float: left; */
width:1200px;
height: 100px;
line-height: 100px;
padding-left: 280px;
box-sizing: border-box;
}
/*.search{
float: left;
width: 296px;
height: 50px;
background-color: blue;
} */
.logo img{
width: 100%;
border-radius: 50%;
}
.nav-bar>ul>li{
padding: 0 50px;
float: left;
}
.nav-bar>ul>li>a:hover{
color: deepskyblue;
/*color: #ff6700;*/
}
.nav-bar-list{
display: none;
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 229px;
background-color: white;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
.nav-bar-list li{
float: left;
width: 204px;
padding-top: 35px;
}
.nav-bar-list li img{
width: 110px;
}
.nav-img-box{
margin-left: 10px;
width: 100%;
height: 110px;
border-right: 1px solid #e0e0e0;
box-sizing: border-box;
margin-bottom: 20px;
}
.nav-bar-list li:last-child .nav-img-box{
border-right: none;
}
.nav-bar-list p{
font-size: 12px;
line-height: 20px;
}
.i{
color: red;
}
.banner/*, .banner-box*/{
width: 100%;
height: 460px;
background-color:yellow;
}
.banner-box{
width: 100%;
height: 460px;
background-color: #ff6700;
}
.banner-box>img{
height: 460px;
}
.container{
width: 100%;
background-color: blueviolet;
padding: 4px 0 12px;
}
.home-banner-box{
width: 100%;
height: 120px;
background-color: aqua;
margin: 22px 0;
}
.title{
color: #333;
font-size: 22px;font-weight: 200;
text-align: left;
line-height: 58px;
}
.phone-box{
width: 100%;
height: 614px;
background-color: #ff6700;
}
.phone-box-left{
float: left;
width: 234px;
height: 614px;
background-color: blue;
}
.phone-box-right{
float: right;
width: 990px;
height: 614px;
background-color: #b0b0b0;
}
.items{
float: right;
width: 234px;
height: 300px;
background-color: #fff;
margin-bottom: 14px;
margin-left: 13px;
}
.qaz{
background-color: #ff6700;
height: 600px;
width: 100%;
}
</style>
<!--引用工具-->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//获取imgList
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementById("imgList").getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 1920*imgArr.length+"px";
/*设置导航按钮居中*/
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementById("navDiv").getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor = "black";
//为所有的超链接都绑定单击响应函数
for(var i=0; i<allA.length ; i++){
//为每一个超链接都添加一个num属性
allA[i].num = i;
//为超链接绑定单击响应函数
allA[i].onclick = function(){
//关闭自动切换的定时器
clearInterval(timer);
//获取点击超链接的索引,并将其设置为index
index = this.num;
//imgList.style.left = -520*index + "px";
//设置选中的a
setA();
//使用move函数来切换图片
move(imgList , "left" , -1920*index , 60, function(){
//动画执行完毕，开启自动切换
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA(){
//判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
//则将index设置为0
index = 0;
//通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
//遍历所有a，并将它们的背景颜色设置为红色
for(var i=0 ; i<allA.length ; i++){
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
//定义一个自动切换的定时器的标识
var timer;
//创建一个函数，用来开启自动切换图片
function autoChange(){
//开启一个定时器，用来定时去切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断index的值
index %= imgArr.length;
//执行动画，切换图片 520* 20
move(imgList , "left" , -1920*index , 60 , function(){
//修改导航按钮
setA();
});
//3000
},6000);
}
};
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
* 设置outer的样式
*/
#outer{
/*设置宽和高*/
width:100%;
height: 600px;
/*居中margin: 50px auto;*/
/*设置背景颜色*/
/*background-color: greenyellow;*/
/*设置padding padding: 10px 0;*/
/*开启相对定位*/
position: relative;
/*裁剪溢出的内容*/
overflow: hidden;
}
/*设置imgList*/
#imgList{
/*去除项目符号*/
list-style: none;
/*设置ul的宽度*/
/*width: 2600px;*/
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
/*
* 每向左移动520px，就会显示到下一张图片
*/
left: 0px;
z-index: -1;
}
/*设置图片中的li*/
#imgList li{
/*设置浮动*/
float: left;
/*设置左右外边距 margin: 5px 10px;*/
}
/*设置导航按钮*/
#navDiv{
/*开启绝对定位*/
position: absolute;
/*设置位置*/
bottom: 15px;
/*设置left值
outer宽度 520
navDiv宽度 25*5 = 125
520 - 125 = 395/2 = 197.5
* */
/*left: 197px;*/
}
#navDiv a{
/*设置超链接浮动*/
float: left;
/*设置超链接的宽和高*/
width: 15px;
height: 15px;
/*设置背景颜色*/
background-color: red;
/*设置左右外边距*/
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
border-radius: 50%;
}
/*设置鼠标移入的效果*/
#navDiv a:hover{
background-color: black;
}
#imgList img {
width:1920px;
height: 600px;
}
</style>
</head>
<body>
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="#">商城</a><span>|</span></li>
<li><a href="#">美</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">下载</a><span>|</span></li>
<li><a href="#">协议</a><span>|</span></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li><a href="#"><i class="inconfont"></i>购物车</a><span>|</span></li>
</ul>
</div>
</div>
<div class="nav">
<div class="wrap">
<div class="logo">
<a href="#">
<img src="img/10.jpg">
</a>
</div>
<div class="nav-bar">
<ul>
<li><a href="#">打印机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">门禁系统</a></li>
<li><a href="#">收银系统</a></li>
<li><a href="#">电子秤</a></li>
<li><a href="#">电脑</a></li>
</ul>
</div>
<!--<div class="search"></div> -->
</div>
</div>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="phone">
<div class="home-banner-box">
<a href="#">
<img src="img">
</a>
</div>
<h2 class="title">手机</h2>
<div class="phone-box">
<div class="phone-box-left">
</div>
<div class="phone-box-right">
<ul>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
