Javascript 响应导航菜单赢得'；展开浏览器后不显示

当我的窗口达到670px时，nav菜单会显示一个css类：none；。然后出现一个下拉图标。下拉图标有一个滑动切换，可显示ul li导航菜单，并可正常工作。然而，一旦窗口再次扩大，就找不到ul li。如果有人能帮忙的话，那就太棒了

这是密码

<style>
body{
    margin:0px; 
    padding:0px;
}
.menu-trigger img{display: none;}
.header_background{
    background-image: url('backgrounddd.jpg');
    position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.clearfixone{
    margin: 0px;
    padding:0px;
    width:100%;
    overflow: hidden;
    border-bottom:1px solid black;

}
.divone{
    max-width: 995px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0px;
    padding-bottom:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border:1px solid red;
    overflow: hidden;


}
#logo{
    height:90px;
    padding:0px;
    margin: 0px;
    margin-top:5px;
}

.nav-menu ul li{
    list-style: none;
    display: inline-block;
    float: right;
    width: 120px;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:2px solid #bfcec7;
    line-height: 30px;
}
li#middle{
    padding-left: 10px;
    padding-right:10px;
}
div.nav-expanded{
    display: block;
}
@media screen and (max-width:990px) {
    .nav-menu ul{
        padding:0px;
        width: 100%;
    }
    .nav-menu ul li{
    background-color:rgba(0, 0,0, 0.7);
    width: 100%;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:none;
    border-top:1px solid white;
    padding-top:10px;
    padding-bottom: 10px;
    float: none;


}
.menu-trigger img{
    height: 25px;
    float: right;
    padding-right: 15px;
    padding-top: 15px;
    display:block;

}
.nav-menu ul{
    display: none;

}
div.nav-expanded{
    display: block;
}

}

</style>
<div class="clearfixone">
          <div class="divone">
          <span class="menu-trigger"><img class="dropdown"src="http://i.imgur.com/Y9huMMG.png"></span>
<div class="nav-menu">
    <ul class="menu">
            <li class="extra"><a href="#">Services Offered</a></li>
                <li class="extra"><a href="#">Learn More </a></li>
                <li><a href="#">About Us</a></li>
                <li id="middle"><a href="#">Request a Quote</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
</div>
    </div></div>

<script>
jQuery(document).ready(function() {

    jQuery(".menu-trigger").click(function() {

        jQuery(".nav-menu, ul").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', 'content');
        });

    });

});
</script>

身体{
边际：0px；
填充：0px；
}
.menu触发器img{显示：无；}
.标题(背景){
背景图片：url（'backgrounddd.jpg'）；
位置：中心；
背景重复：无重复；
背景大小：100%；
}
.clearfixone{
边际：0px；
填充：0px；
宽度：100%；
溢出：隐藏；
边框底部：1px纯黑；
}
.迪翁{
最大宽度：995px；
左边距：自动；
右边距：自动；
填充顶部：0px；
垫底：0px；
边际上限：0px；
边缘底部：0px；
边框：1px纯红；
溢出：隐藏；
}
#标志{
高度：90px；
填充：0px；
边际：0px；
边缘顶部：5px；
}
.导航菜单ul li{
列表样式：无；
显示：内联块；
浮动：对；
宽度：120px；
填充：0px；
边际：0px；
文本对齐：居中；
右边框：2px实心#bfcec7；
线高：30px；
}
李#中{
左侧填充：10px；
右边填充：10px；
}
分区导航扩展{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：990px）{
.导航菜单{
填充：0px；
宽度：100%；
}
.导航菜单ul li{
背景色：rgba（0,0,0,0.7）；
宽度：100%；
填充：0px；
边际：0px；
文本对齐：居中；
边界权：无；
边框顶部：1px纯白；
填充顶部：10px；
垫底：10px；
浮动：无；
}
.菜单触发img{
高度：25px；
浮动：对；
右侧填充：15px；
填充顶部：15px；
显示：块；
}
.导航菜单{
显示：无；
}
分区导航扩展{
显示：块；
}
}







jQuery（文档）.ready（函数（）{
jQuery（“.menu trigger”）。单击（函数（）{
jQuery（“.nav菜单，ul”）.滑动切换（400，函数（）{
jQuery（this）.toggleClass（“导航扩展”）.css（'display'，'content'）；
});
});
});

尝试将最小宽度的媒体查询置于相同的屏幕宽度，以将显示：块样式重新应用到导航菜单上

@media screen and (min-width:990px){
    .nav-menu ul { display: block !important; }
}

@media screen and (max-width:990px) { 
    .nav-menu ul { display: none; }
}

---

如果您检查HTML并找到隐藏的元素，它是否应用了内联样式？顺便问一下，希望您不是从上面剪切并粘贴我的代码，因为我刚刚注意到我拼错了“screen”。我猜显示/隐藏元素的幻灯片切换在向上滑动后放置了内联样式“display:none”。内联样式将覆盖常规CSS。因此，您可能必须在display:block上加一个“！important”标志，以确保它优先于内联显示：none。