Jquery Div图标不随导航扩展

我试图让我的导航从页面右侧展开。我有一部分下来，但当我点击按钮（我想与导航移动），它保持静止，并没有推出与导航的权利

以下是我所拥有的：

#wrap {
    width:600px;
} 
/* Navigation */
  #nav {
    position: fixed;
    height:22px;
    top: 50px;
    right: 0px;
    margin: 0px;
    padding: 4px 0;
    background: #00add2;
    list-style: none;
    z-index: 9999;
    width: 555px;
  }
  #nav .nav-btn {
    position: fixed;
    top: 50px;
    right: 0;
    width: 40px;
    height: 35px;
    display: block;
    cursor: pointer;
    border:1px solid #000;
    background: url('../images/nav-btn.png') no-repeat center center;
  }
  #nav .nav-btn img {
    margin: 20px 0px 0px 13px;
  }
  #nav li {
    display: inline;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-family: 'misoregular';
    font-size: 19px;
  }
  #nav li a {
    color: #FFF;
    text-decoration: none;
  }
  #nav li a:hover {
    color: #000;
  }

$(function() {
        $('#nav').stop().animate({'margin-right':'-555px'},1000);
        function toggleDivs() {
            var $inner = $("#nav");
        if ($inner.css("margin-right") == "-555px") {
            $inner.animate({'margin-right': '0'});
        $(".nav-btn").html()
        }
        else {
        $inner.animate({'margin-right': "-555px"});
        $(".nav-btn").html()
    }
}
    $(".nav-btn").bind("click", function(){
        toggleDivs();
    });
});

<div id="wrap">
<div id="nav">
    <div class="nav-btn"></div>
        <ul class="main-tabs">
             <li><a href="#the-advantage">THE ADVANTAGE</a></li>
             <li><a href="#banner-services">OUR SERVICES</a></li>
             <li><a href="#team">OUR TEAM</a></li>
             <li><a href="#banner-news">MAKING NEWS</a></li>
             <li><a href="#banner-contact">CONTACT</a></li>
         </ul>
</div>
</div>

#换行{
宽度：600px；
} 
/*航行*/
#导航{
位置：固定；
高度：22px；
顶部：50px；
右：0px；
边际：0px；
填充：4px0；
背景：#00add2；
列表样式：无；
z指数：9999；
宽度：555px；
}
#导航，导航基站{
位置：固定；
顶部：50px；
右：0；
宽度：40px；
高度：35px；
显示：块；
光标：指针；
边框：1px实心#000；
背景：url（'../images/nav btn.png'）无重复中心；
}
#导航。导航btn img{
保证金：20px 0px 0px 13px；
}
#李海军{
显示：内联；
填充：0 10px；
文本对齐：居中；
文字装饰：无；
颜色：#FFF；
字体系列：“不规则”；
字号：19px；
}
#李娜{
颜色：#FFF；
文字装饰：无；
}
#导航李a：悬停{
颜色：#000；
}
$（函数（）{
$（'#nav'）.stop（）.animate（{'margin-right'：'-555px'}，1000）；
函数toggleDivs（）{
var$内部=$（“资产净值”）；
if（$internal.css（“右边距”）==“-555px”）{
$inner.animate（{'margin-right'：'0'}）；
$（“.nav btn”）.html（）
}
否则{
$inner.animate（{'margin-right'：“-555px”}）；
$（“.nav btn”）.html（）
}
}
$（“.nav btn”）.bind（“单击”，函数（）{
toggleDivs（）；
});
});

这是我小提琴的链接

---

提前感谢

从要移动的按钮上删除

位置：固定

声明。谢谢你，我想我已经盯着它看了很久了。我删除了位置：固定，然后添加了位置：相对和顶部：-6px，一切正常。如果你将评论移到回答，我将给予你信任。