我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
实现
- 导航栏：navbar
导航栏容器可以包含以下几个常用组成：
1、品牌LOGO（.navbar-brand ）
navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.
2、导航菜单（.navbar-nav）
.navbar——设置nav元素为导航条组件；
.navbar-default——指定导航条组件为默认主题；
.navbar-inverse——指定导航条组件为黑色主题；
.navbar-fixed-top——设置导航条组件固定在顶部；
.navbar-fixed-bottom——设置导航条组件固定在底部；
.container-fluid——设置宽度充满父元素，即为100%；
.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-toggle——设置button元素为导航条组件的切换钮；
.collapsed——设置button元素为在视口小于768px时才显示；
响应式的导航栏 为了给导航栏添加响应式特性，
您要折叠的内容必须包裹在带有 classes **.**collapse、.navbar-collapse 的
中。 折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。
三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为**.navbar-collapse**
中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
代码流程
- 盒子代码
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<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>
<li><a href="#">啥是佩奇</a></li>
</ul>
</div>
然后利用css代码监听悬浮，切换css样式器就可以了。
