一、简单的导航栏

首先通过一个入门级的导航栏来练习一下

1、先布局好html的结构

2、通过css样式得到想要的导航效果

上面第一个例子让大家简单的了解了菜单栏的原理，在不同过js的情况下，就可以轻松实现二级菜单栏，三级菜单也可以在此基础上添加。至于一些细节的处理，就要靠大家自己去调整了。

在例子一中，其实还有个坑，就是在二级菜单展示之后，会影响下方容器的布局。

从上图中可以很清楚的看到，子菜单在隐藏和显示的时候会对其他标签产生影响

在第二个例子中，就对这一问题进行了处理

二、升级版翻转菜单导航栏

为了解决例子一中，二级菜单会隐藏和显示两种状态下会影响原来标签样式的布局，做以下优化