css二级菜单的隐藏与显示_纯CSS实现简单二级导航下拉效果

在设计前端页面是，我们有一个原则:效果能用css实现的，绝对不用js来实现，因为这样可以加快页面渲染速度，js的解析速度要慢于css的解析速度!

css简单二级导航

小提示:完整源码和注释在最下方

使用纯css来实现二级导航的大致思路是:

规划一级导航

使用最简单的元素

,ul li a来实现，

规划二级导航，直接在一级导航的Li元素中使用ul li a

一级导航设计第一个要点：

li要设置为float:left，因为li元素默认的display属性是list-item，这个属性有点类似于block，默认是换行的，所以我们要指定float:left,让li元素水平顺序排列

#navBar ul li{ float: left;/**浮动向左就会自动排列**/ background-color: #ddd3d3; position: relative;/**用作2级导航的定位元素**/ }

一级导航的第二个要点：

a属性的display属性要设置为block,因为A元素的默认属性是inline，inline不会填充整个宽度，display:block可以做到

 #navBar ul li a{ display: block; margin: 0 10px; line-height: 50px;/**文字水平居中**/ }

一级导航的第三个要点：

a元素的line-height要和导航条的高度一致，这样可以做到文字垂直居中，同样，我们在加上text-algin:center属性，文字就变得水平居中了

一级导航的第四个要点：

一级导航的Li元素postion属性我们设置为relative，一会我们要用到

二级导航要点：

把li继承一级导航中的float:left属性去掉

 #navBar ul li ul li{ float: none; border-bottom: 1px solid #000; }

因为二级导航列表项我们要的排列效果是垂直排列

设置二级导航ul display:none;先把二级导航隐藏

 #navBar ul li ul{ display: none; /**没有发生hover事件的时候，先隐藏二级导航**/ }

设置二级导航postion属性为Postion:absolute,top:一级导航条的高度,left:0;

 position: absolute;/**位置是绝对定位，定位的父元素是一级导航的li**/ top:50px;/**一级导航条的高度，不设定会覆盖1级导航**/ left: 0;

核心：

我们使用li的伪类来实现二级导航菜单的显示

#navBar ul li:hover ul{Display:block;}

对，css的弱项在哪里？就是没有驱动事件，伪类有时候可以实现事件驱动效果

最后，为了二级导航的列表清晰一些，我们在二级导航中li元素添加一个1像素的黑色实体下边框

要点：

二级导航的代码要放在一级导航ul li的后面，具体就是:

• 导航11
• 导航12

导航1

为什么不把二级导航放在一级导航Li的下方？这样代码结构不是更加清晰明了吗

因为position:absolute要寻找一个postion:relative的父元素，如果找不到最近的relative父元素，那么就以body为父元素定位，如果二级导航代码在一级导航的li下方，那么一级导航li和二级导航这时间属于同级元素，不是父子关系，所有二级导航的绝对定位会定位到body

总结：我们使用了:hover伪类实现了css代替js事件，触发并实现了二级导航的样式改变，使用了相对定位和绝对定位来显现了二级导航正确显示在一级导航列表项的下方，能用css实现的事情，就不要使用js来做！

完整代码带注释:

 纯css导航条

子导航1子导航2 导航1 子导航1子导航2导航2导航3