Web前端最全前端入门篇（四十六）JS应用1二级下拉菜单问题记录(2)，系列教学

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

.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文件：

• 关于蝉壳
• 关于蝉壳1
• 关于蝉壳2
• 关于蝉壳3

• 为了让鼠标悬浮在’关于蝉壳‘上时，显示出下拉菜单，并且下拉菜单被一级菜单遮住一点点，需要将二级菜单设置成浮起来的样子（使用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代码：

  最后

  为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】