<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多级菜单制作</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.banner{
/*list-style: none;*/
width: 1000px;
margin: 100px;
text-align: center;
}
.banner li{
float: left;
width: 100px;
line-height: 40px;
background-color: #ccc;
text-align: center;
/*padding: 10px 0;*/
}
.banner li:hover{
background-color: #900;
color: #fff;
}
.second{
display: none;
position: relative;
}
.third{
display: none;
position: absolute;
top:0;
left:100px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var lis=document.getElementById("banner").getElementsByTagName("li");
// alert(lis.length);
for (var i = 0; i < lis.length; i++) {
//this.id=i;获取id放在最外层循环；
// alert(uls.length);
lis[i].οnmοuseοver=function(){
//js设置鼠标移动到元素上时改变样式一般使用style.属性，但是经常浏览器获取不到属性，因此最好使用 元素:hover{display:block;}这样可以避免问题 js中不设置display 的属性值
var This=this;//获取触发事件对象要放在触发事件的里面
var sec=This.getElementsByTagName("ul")[0];
sec.style.display="block";//为什么js老是获取不到
}
lis[i].οnmοuseοut=function(){
var sec=this.getElementsByTagName("ul")[0];
sec.style.display="none";
}
}
}
</script>
</head>
<body>
<ul id="banner" class="banner">
<li class="first">首页+
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">新闻资讯
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">产品展示+
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">售货服务
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">联系我们
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
</ul>
</body>
<html>
<head>
<meta charset="utf-8">
<title>多级菜单制作</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.banner{
/*list-style: none;*/
width: 1000px;
margin: 100px;
text-align: center;
}
.banner li{
float: left;
width: 100px;
line-height: 40px;
background-color: #ccc;
text-align: center;
/*padding: 10px 0;*/
}
.banner li:hover{
background-color: #900;
color: #fff;
}
.second{
display: none;
position: relative;
}
.third{
display: none;
position: absolute;
top:0;
left:100px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var lis=document.getElementById("banner").getElementsByTagName("li");
// alert(lis.length);
for (var i = 0; i < lis.length; i++) {
//this.id=i;获取id放在最外层循环；
// alert(uls.length);
lis[i].οnmοuseοver=function(){
//js设置鼠标移动到元素上时改变样式一般使用style.属性，但是经常浏览器获取不到属性，因此最好使用 元素:hover{display:block;}这样可以避免问题 js中不设置display 的属性值
var This=this;//获取触发事件对象要放在触发事件的里面
var sec=This.getElementsByTagName("ul")[0];
sec.style.display="block";//为什么js老是获取不到
}
lis[i].οnmοuseοut=function(){
var sec=this.getElementsByTagName("ul")[0];
sec.style.display="none";
}
}
}
</script>
</head>
<body>
<ul id="banner" class="banner">
<li class="first">首页+
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">新闻资讯
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">产品展示+
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">售货服务
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
<li class="first">联系我们
<ul class="second">
<li>前端开发+
<ul class="third">
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>手机开发</li>
<li>后台开发</li>
</ul>
</li>
</ul>
</body>
</html>
1、使用float:left；来设置ul li 而不用display：inline-block；这样就会呈现出子列表在下方的样式。再通过设置position来设置三级列表的位置
因为浮动元素会尽可能的居顶，并且垂直定位规则比水平浮动规则的优先级更高。
扫一扫
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
