老师，这样出现这种情况，该如何解决
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>下拉菜单</title>
<style>
*{
margin:0px;
padding:0px;
}
div{
width:600px;
height:40px;
background-color:#000099;
margin:0 auto;
}
ul li{
list-style:none;
width:150px;
height:40px;
line-height:40px;
text-align:center;
float:left;
}
a{
text-decoration:none;
display:block;
color:#000;
}
a:hover{
color:#F00;
background-color:#00F;
}
ul li ul li{
background-color:#009;
margin-top:3px;
}
ul li ul{
display:none;
}
</style>
<script>
//页面加载完毕后执行
window.onload=function(){
////获取id变量
var mainbav=byId("mainbav"),
x=mainbav.getElementsByTagName("ul")[0],
mainba=byId("mainba"),
y=mainba.getElementsByTagName("ul")[0],
mainb=byId("mainb"),
t=mainb.getElementsByTagName("ul")[0];
////封装一个获取id的函数
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
function xians(){
//鼠标经过时，下拉菜单显示
mainbav.onmouseover=function(){
x.style.display="block";
y.style.display="block";
t.style.display="block";
}
//鼠标离开时，下拉菜单隐藏
mainbav.onmouseout=function(){
x.style.display="none";
y.style.display="none";
t.style.display="none";
}
}
//调用函数
xians()
}
</script>
</head>
<body>
<div>
<ul>
<li><a href="#">首页</a></li>
<li id="mainbav"><a href="#">前端</a>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">js</a></li>
</ul>
</li>
<li id="mainba"><a href="#">后端</a>
<ul>
<li><a href="#">php</a></li>
<li><a href="#">mysql</a></li>
</ul>
</li>
<li id="mainb"><a href="#">优化</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">SEM</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
正在回答
你好，这里移入的时候，设置了所有的下拉显示，当然会是这个样子了，要设置对应的下拉菜单显示，其他的是不需要显示的。
祝学习愉快~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星