三级导航栏

三级导航

导航栏是一个页面必备的部分，主要用来引导人们去浏览相应的内容。下面我们来看一下导航栏里面的三级导航是如何制作的，首先我们来看一下HTML部分，如图：

然后我们来认识一下俩个css的属性1. Visibility属性可指定一个元素是否可见。2. Opacity属性可来设置一个元素的透明度。接下来我们要给类名为C的ul标签的Visibility属性设为hidden，也就是隐藏，Opacity属性设置为0。如图：

这样我们就可以把二级导航部分隐藏起来。然后给类名为B的li标签一个伪类，使其在鼠标移到B上时C的Visibility属性改为visible，也就是显示，Opacity属性设置为1。如图：

这样一来就把二级导航的效果实现了。然后我们在给类名为D的ul标签的Visibility属性设为hidden，也就是隐藏，Opacity属性设置为0。如图：

在把三级导航部分隐藏起来后，我们要把类名为B的li标签设置一个伪类，使其在鼠标移到B上时C的Visibility属性改为visible，Opacity属性设置为1。如图：

这样三级导航栏的效果就全部完成了。实际效果如下：