前端入门篇（四十六）JS应用1二级下拉菜单问题记录
一级菜单问题记录：
html文件：
<body><div><div class="container"><ul class="nav-list clearfixed"><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>div>div>
body>
1.清除浮动
为清除浮动专门设置了一个class，别忘记写after
.clearfixed::after {content: "";display: table;clear:both;
}
2.想要让菜单在页面中居中，用margin：
.container {width:1200px;/* border:1px solid black; */margin: 20px auto;
}
3.只对nav-list下的子标签li有效，如果里面又嵌套了li，该样式对其无效，用子选择器.nav-list > li
让菜单中文字有间隔，用margin：
.nav-list > li {float: left;margin: 0 20px;
}
4.当鼠标移动到菜单上时，要求加1px边框，会导致鼠标悬浮有抖动的效果：
css文件：
.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;
}
.nav-list > li > a:hover {color: #bc0303;background-color: #fff;border: 1px solid #c9c9c9;
}
效果：
讨论1：可以在a标签没有悬浮时，也添加上border，并且与菜单的背景颜色一致，同时也给a未悬浮时，上下方向上的li多加了2px
css文件：
.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;border:1px solid #808080;
}
讨论2：将底部的边框设置为none，并加高菜单的高度（从42px加为43px），遮住li边框的下边缘（毛刺）
也将悬浮时的下边框去掉，以符合下拉菜单最终的效果
.nav-list {background-color: #808080;height: 43px;
}
.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;border:1px solid #808080;border-bottom: none;
}
.nav-list > li > a:hover {color: #bc0303;background-color: #fff;border: 1px solid #c9c9c9;border-bottom: none;
}
二级菜单问题记录
1.快速生成li列表，且带有a标签和内容
ul>li*3>a>{关于蝉壳$}
回车即可
2.二级下拉菜单部分
html文件：
<li><a href="">关于蝉壳a><div class="item"><ul class="item-list"><li><a href="">关于蝉壳1a>li><li><a href="">关于蝉壳2a>li><li><a href="">关于蝉壳3a>li>ul>div>
li>
为了让鼠标悬浮在’关于蝉壳‘上时，显示出下拉菜单，并且下拉菜单被一级菜单遮住一点点，需要将二级菜单设置成浮起来的样子（使用position和z-index）
css文件：
.nav-list {background-color: #808080;height: 43px;position: relative;
}//以一级菜单做position调整
.nav-list > li > a {color: #fff;display: block;height: 42px;line-height: 42px;font-size: 18px;padding: 0 12px;border:1px solid #808080;border-bottom: none;position:relative;z-index: 9;
}//要设置z-index，所以a标签也要设置position
.nav-list .item {width: 160px;position: absolute;z-index: 1;top: 42px;
}
.nav-list .item .item-list {background-color: #fff;border:1px solid #c9c9c9;padding:2px 0 10px 12px;
}
.item-list > li {line-height: 40px;
}
.item-list > li a {color: #6e6e6e;line-height: 40px;
}
.item-list > li > a:hover {text-decoration: underline;
}
效果：鼠标悬浮在上面时，一级菜单在二级菜单之上
3.使用getElementsByTagName(‘li’)时，下拉菜单下的li也会被计算进去，一级菜单有7个li，下拉菜单有3个，一共10个li
js代码：
var navList = document.getElementById('navList').getElementsByTagName('li');
效果：
4.用js设置，当鼠标悬浮时显示下拉菜单，移开时不显示
js代码：
<script>var navList = document.getElementById('navList').getElementsByTagName('li');for (var i = 0; i<navList.length;i++){navList[i].onmousemove = function(){this.className = 'show';}navList[i].onmouseout = function(){this.className = '';}}</script>
css文件：
.nav-list .item {width: 160px;position: absolute;z-index: 1;top: 42px;display:none;
}
.nav-list .show .item {display:block;
}
相当于当鼠标悬浮上去时，在对应li上加了class='show'，但在html上不直接加，否则页面一打开就显示下拉菜单：
5.此时下拉二级菜单已经可以按要求显示，但鼠标离开一级菜单，在二级菜单上悬浮时，一级菜单的悬浮样式就没有了，此处需要做修改，通过show，加上在二级菜单悬浮时，一级菜单的样式
此处需要限定时nav-List下，show下的a标签，不作用在二级菜单里的a标签，因此使用子选择器，将nav-List下a的悬浮样式copy过来
css文件：
.nav-list > .show > a {color: #bc0303;background-color: #fff;border: 1px solid #c9c9c9;border-bottom: none;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！