Javascript 响应式设计菜单

我想让我的网站响应我使用html5，css3，javascript和jquery 我想我的菜单是响应，我有一个问题，在我的css

• 陈述
• 副食品
• 产品
• 法国
• 接触

菜单

---

我的菜单有问题，有人能帮我解决吗。

请试着把所有问题都放在这个jsfiddle上，告诉我们美国的问题出在哪里

nav{
高度：40px；
宽度：100%；
背景#455868；
字号：11pt；
字体系列：“PT Sans”，Arial，Sans serif；
字体大小：粗体；
位置：相对位置；
边框底部：2个实心#283744；
}
导航ul{
填充：0；
保证金：0自动；
宽度：600px；
高度：40px；
}
李海军{
显示：内联；
浮动：左；
}
导航a{
颜色：#fff；
显示：内联块；
宽度：100px；
文本对齐：居中；
文字装饰：无；
线高：40px；
文本阴影：1px 1px 0px#283744；
}
李娜{
右边框：1px实心#576979；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
李海军：最后一个孩子{
右边界：0；
}
导航a：悬停，
导航a：激活{
背景色：#8c99a4；
}
导航a#拉力{
显示：无；
}
/*600px及以下屏幕的样式*/
@媒体屏幕和屏幕（最大宽度：600px）{
导航{
高度：自动；
}
导航ul{
宽度：100%；
显示：块；
高度：自动；
}
李海军{
宽度：50%；
浮动：左；
位置：相对位置；
}
李娜{
边框底部：1px实心#576979；
右边框：1px实心#576979；
}
导航a{
文本对齐：左对齐；
宽度：100%；
文本缩进：25px；
}
}
/*515px及以下屏幕的样式*/
@仅介质屏幕和（最大宽度：480px）{
导航{
边界底部：0；
}
导航ul{
显示：无；
高度：自动；
}
导航a#拉力{
显示：块；
背景色：#283744；
宽度：100%；
位置：相对位置；
}
导航a#拉力：在{
内容：“；
背景：url（'nav-icon.png'）不重复；
宽度：30px；
高度：30px；
显示：内联块；
位置：绝对位置；
右：15px；
顶部：10px；
}
}
/*智能手机*/
@仅介质屏幕和（最大宽度：320px）{
李海军{
显示：块；
浮动：无；
宽度：100%；
}
李娜{
边框底部：1px实心#576979；
}
}

陈述
副食品
产品
法国
接触

你甚至没有提到这个问题。你只是抛出一些代码。菜单没有响应

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav { 
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}