CSS3 media queries + jQuery实现响应式导航

目的：

实现一个响应式导航，当屏幕宽度大于700px时，效果如下：

当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来：

思路：

1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。

   所以我选择了将导航绝对定位。

2.默认导航列表是出现的，当屏幕宽度小于700px时它隐藏，并且设置position，当屏幕宽度大于700px时，它出现。或者，默认导航列表是隐藏的，当屏幕宽度大于700px时它出现在右侧，小于时隐藏。

问题：

开始的时候，我选择了默认他出现，然后出现了一个问题——只要按过了按钮，屏幕放大之后导航列表就再也不会出现了。

代码如下：