我想做一个鼠标进过下拉菜单，结果经过时出现了不可描述的问题如图。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<style type="text/css">
*{
list-style-type: none;
margin: 0;
padding: 0;
transition: all .5s;
}
li{
height: 42px;
width: 150px;
}
a{
display:block;
width: 150px;
height: 42px;
color:#881715 ;
text-decoration: none;
}
.nav{
margin: 100px auto;
text-align: center;
line-height: 42px;
}
.mainli{
width: 150px;
display: inline-block;
}
.mainli ul {
display: none;
}
.mainli ul li:hover {
background-color: #9f9093;
color: white;
}
.mainli a:hover{
color: white;
background-color: #9f9093;
}
</style>
</head>
<body>
<ul class="nav">
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
</ul>
<script>
var nav =document.querySelector('.nav');
var lis=nav.children;
console.log(lis);
//设置鼠标经过事件
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function (){
this.children[1].style.display='inline-block';
}
lis[i].onmouseout=function (){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
首先，你所指的不可描述的问题是布局改变了吗？
如果是，你可以将下拉菜单变成绝对定位，脱离文档流，不影响页面布局
.mainli{
width: 150px;
display: inline-block;
position:relative;
}
.mainli ul {
display: none;
position:absolute;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<style type="text/css">
*{
list-style-type: none;
margin: 0;
padding: 0;
transition: all .5s;
}
li{
height: 42px;
width: 150px;
}
a{
display:block;
width: 150px;
height: 42px;
color:#881715 ;
text-decoration: none;
}
.nav{
margin: 100px auto;
text-align: center;
line-height: 42px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.mainli{
width: 150px;
display: inline-block;
}
.mainli ul {
display: none;
}
.mainli ul li:hover {
background-color: #9f9093;
color: white;
}
.mainli a:hover{
color: white;
background-color: #9f9093;
}
</style>
</head>
<body>
<ul class="nav">
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
<li class="mainli">
<a href="">你好呀!!</a>
<ul>
<li>小震</li>
<li>你好</li>
<li>想吧</li>
</ul>
</li>
</ul>
<script>
var nav =document.querySelector('.nav');
var lis=nav.children;
console.log(lis);
//设置鼠标经过事件
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function (){
this.children[1].style.display='inline-block';
}
lis[i].onmouseout=function (){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
有用的话请点击采纳谢谢