导航菜单的挪动鼠标触发下拉特效怎么做？
javascript吧
全部回复
仅看楼主
level 2
uorevor 楼主
我的代码
导航菜单是我的头疼的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...</title>
<style>
/*#pff{background-color: rgb(113,16,111);width: 100%;}*/
ul{list-style: none;}
li{border: #B0004A solid 1px;text-align: center;}
#mth>li{float: left;width: 10%;height: 50px;line-height: 50px;}
#mth>li>ul{display: none;}
#mth>li>ul>li{}
a{text-decoration: none;
color: white;background-color: rgb(113,16,111);display: block;
}
#mth>li>a:hover{background-color: rgb(106,12,103);}
#mth>li>ul>li>a:hover{background-color: white;color:rgb(113,16,111); }
</style>
<script type="text/javascript">
function menu(){
var lis = document.getElementById("mth").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
var li_ul=this.getElementsByTagName("ul")[0];
if(li_ul.style.display=="block"){
li_ul.style.display="none";
}else{
li_ul.style.display="block";
}
}
}
}
window.onload=menu;
</script>
</head>
<body>
<div id="pff">
<ul id="mth">
<li><a href="#">南大概况</a><ul>
<li><a href="#">南大简介</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">历任领导</a></li>
<li><a href="#">南大校史</a></li>
<li><a href="#">统计资料</a></li>
<li><a href="#">南大标识</a></li>
</ul></li>
<li><a href="#">院系部门</a></li>
<li><a href="#">招生就业</a><ul>
<li><a href="#">招生</a></li>
<li><a href="#">奖助学</a></li>
<li> <a href="#">就业创业</a></li>
</ul></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">科学研究</a><ul>
<li><a href="#">科研动态</a></li>
<li><a href="#">科研机构</a></li>
<li><a href="#">成果查询</a></li>
<li><a href="#">学术期刊</a></li>
</ul></li>
<li><a href="#">合作交流</a><ul>
<li><a href="#">国际合作</a></li>
<li><a href="#">合作办学</a></li>
<li><a href="#">学生交流</a></li>
<li><a href="#">成果转化</a></li>
</ul></li>
<li><a href="#">文化生活</a><ul>
<li><a href="#">南大青年</a></li>
<li><a href="#">工会</a></li>
<li><a href="#">小百合BBS</a></li>
<li><a href="#">微媒体</a></li>
</ul></li>
<li><a href="#">校园服务</a>
<ul>
<li><a href="#">电话黄页</a></li>
<li><a href="#">南大校历</a></li>
<li><a href="#">鼓楼服务大厅</a></li>
<li><a href="#">图书馆</a></li>
<li><a href="#">心理咨询</a></li>
<li><a href="#">后勤服务</a></li>
<li><a href="#">网络服务</a></li>
<li><a href="#">媒体采访</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">超算服务</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
2020年06月02日 12点06分 1
level 12
丶影-奈斯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>...</title>
<style>
ul {list-style: none;margin: 0;padding: 0;}
li {border: #B0004A solid 1px;text-align: center;}
#mth:after {
content: "";
display: block;
clear: both;
}
#mth {
width: 80%;
margin: 0 auto;
}
#mth>li{float: left;width: 12.5%;height: 50px;line-height: 50px;position: relative;box-sizing:border-box;}
#mth>li>ul{display: none;position: absolute;
left: 0;
top: 100%;
z-index: 10;
width: 100%;
}
a{text-decoration: none;
color: white;background-color: rgb(113,16,111);display: block;
}
#mth>li>a:hover{background-color: rgb(106,12,103);}
#mth>li>ul>li>a:hover{background-color: white;color:rgb(113,16,111); }
</style>
<script type="text/javascript">
function menu(){
var lis = document.querySelectorAll('#mth>li');
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
var li_ul=this.getElementsByTagName("ul")[0];
if (li_ul) li_ul.style.display="block";
};
lis[i].onmouseout = function() {
var li_ul=this.getElementsByTagName("ul")[0];
if (li_ul) li_ul.style.display="none";
};
}
}
window.onload=menu;
</script>
</head>
<body>
<div id="pff">
<ul id="mth">
<li><a href="#">南大概况</a><ul>
<li><a href="#">南大简介</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">历任领导</a></li>
<li><a href="#">南大校史</a></li>
<li><a href="#">统计资料</a></li>
<li><a href="#">南大标识</a></li>
</ul></li>
<li><a href="#">院系部门</a></li>
<li><a href="#">招生就业</a><ul>
<li><a href="#">招生</a></li>
<li><a href="#">奖助学</a></li>
<li> <a href="#">就业创业</a></li>
</ul></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">科学研究</a><ul>
<li><a href="#">科研动态</a></li>
<li><a href="#">科研机构</a></li>
<li><a href="#">成果查询</a></li>
<li><a href="#">学术期刊</a></li>
</ul></li>
<li><a href="#">合作交流</a><ul>
<li><a href="#">国际合作</a></li>
<li><a href="#">合作办学</a></li>
<li><a href="#">学生交流</a></li>
<li><a href="#">成果转化</a></li>
</ul></li>
<li><a href="#">文化生活</a><ul>
<li><a href="#">南大青年</a></li>
<li><a href="#">工会</a></li>
<li><a href="#">小百合BBS</a></li>
<li><a href="#">微媒体</a></li>
</ul></li>
<li><a href="#">校园服务</a><ul>
<li><a href="#">电话黄页</a></li>
<li><a href="#">南大校历</a></li>
<li><a href="#">鼓楼服务大厅</a></li>
<li><a href="#">图书馆</a></li>
<li><a href="#">心理咨询</a></li>
<li><a href="#">后勤服务</a></li>
<li><a href="#">网络服务</a></li>
<li><a href="#">媒体采访</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">超算服务</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
2020年06月03日 08点06分 3
uorevor
#mth:after { content: ""; display: block; clear: both; }起什么作用？注释掉后不影响
2020年06月08日 00点06分
丶影-奈斯
@uorevor 只是清除浮动用的 百度搜索 .clearfix:after [乖]
2020年06月08日 01点06分
level 6
璐村惂鐢ㄦ埛_74bVJQy馃惥
楼主，看来是解决了，遇见问题也可以来群里提问哈
378130298
2020年06月15日 06点06分 5
1